React 18에서 Suspense 제대로 쓰는 법

리액트 18에서 Suspense가 데이터 패칭까지 지원되는데, 아직도 옛날 방식으로 쓰는 사람들이 많더라고요. 간단 정리:

• 기존: useEffect + useState로 로딩 관리
• 개선: Suspense + fetch나 SWR로 선언적 처리

예시 코드:

<Suspense fallback={<Loading />}>

<UserProfile userId={id} />

</Suspense>

이렇게 하면 컴포넌트 안에서 fetch 직접 호출해도 Suspense가 로딩을 알아서 잡아줍니다.

주의점: ErrorBoundary도 함께 써야 에러 핸들링이 됩니다. 그리고 concurrent mode를 활성화하려면 createRoot로 마이그레이션 해야 해요.