리액트 18에서 Suspense가 데이터 패칭까지 지원되는데, 아직도 옛날 방식으로 쓰는 사람들이 많더라고요. 간단 정리:
- 기존: useEffect + useState로 로딩 관리
- 개선: Suspense + fetch나 SWR로 선언적 처리
예시 코드:
<Suspense fallback={<Loading />}>
<UserProfile userId={id} />
</Suspense>
이렇게 하면 컴포넌트 안에서 fetch 직접 호출해도 Suspense가 로딩을 알아서 잡아줍니다.
주의점: ErrorBoundary도 함께 써야 에러 핸들링이 됩니다. 그리고 concurrent mode를 활성화하려면 createRoot로 마이그레이션 해야 해요.