Suspense와 React.lazy는 코드 분할을 위해 어떻게 동작하나요?

Question

Accepted Answer

**`React.lazy`**는 컴포넌트의 JavaScript 번들을 **필요할 때**(처음 render될 때만) 로드합니다. **`Suspense`**는 lazy(또는 데이터를 suspend하는) 자식이 아직 로딩 중일 때 fallback UI를 보여줍니다. ```jsx const Chart = React.lazy(() => import("./Chart")); // 별도 번들, lazy하게 로드됨 function Dashboard() { return ( }> {/* Chart의 코드가 도착할 때까지 표시 */} ); } ``` ## 왜 중요한가: 더 작은 초기 로드 코드 분할 없이는 브라우저가 무언가를 보여주기 전에 **전체** 앱(무거운 차팅 라이브러리 포함)을 다운로드합니다. `lazy`를 사용하면 `Chart`의 코드가 자체 파일로 분할되고 사용자가 실제로 도달할 때만 페칭되어 — 초기 로드 시간과 Core Web Vitals를 개선합니다. ## Suspense가 이를 어떻게 조율하는가 `Chart`가 suspend되면(그 번들이 준비되지 않음), React는 트리의 그 부분을 "일시 정지"하고 가장 가까운 `Suspense` fallback을 대신 render한 다음, 로드되면 실제 컴포넌트로 교체합니다. 단일 boundary가 여러 lazy 자식을 감싸고 하나의 fallback을 보여줄 수 있습니다: ```jsx }>

``` ## 코드 분할을 넘어서 Suspense는 또한 대기 중인 fetch에서 "suspend"하는 프레임워크/라이브러리와 함께 **데이터 로딩**을 조율하고, **스트리밍 SSR**(Next.js App Router)과 짝을 이루어 빠른 셸을 보내고 더 느린 부분을 스트리밍합니다. 콘텐츠가 갑자기 나타날 때 크고 거슬리는 레이아웃 이동을 피하도록 boundary를 신중하게 배치하세요.