<div id="readability-page-1" class="page"><div>
 <div id="SE-ce04ed83-ff5e-4dca-9809-ba36000c091d">
 앱이 커질수록 첫 화면이 느려집니다. 왜일까요? 기본적으로 앱의 모든 JavaScript가 하나의 큰 파일로 묶여, 첫 화면을 그리기 전에 통째로 다운로드되기 때문입니다. 설정 페이지, 관리자 화면, 무거운 차트… 사용자가 아직 보지도 않은 코드까지 전부요. 이걸 해결하는 게 코드 분할(code splitting)입니다. 이번 챕터에서 React.lazy와 Suspense로 "필요할 때만 나눠 불러오는" 법을 배웁니다.
​
​
문제 — 안 쓸 코드까지 처음에 다 받는다

 </div> <div id="SE-15241278-4880-4ae6-9ff0-bf98d3054721">
 [코드 분할 전] 하나의 거대한 bundle.js
 ├─ 홈 페이지 코드
 ├─ 설정 페이지 코드 ← 사용자가 설정에 안 들어가도 받음
 ├─ 관리자 페이지 코드 ← 일반 사용자는 영영 안 쓰는데도 받음
 └─ 무거운 차트 라이브러리 ← 차트를 안 봐도 받음
→ 첫 화면이 뜨기까지 이 전부를 다운로드해야 한다 (느림)
 </div> <div id="SE-501ad16e-5898-40d4-8bd3-3c651554010a">
 핵심은 "지금 당장 필요한 코드만 받고, 나머지는 필요해지는 순간 받자"입니다. 그러면 첫 로딩이 가벼워지죠.
 </div> <div id="SE-4ea226de-b714-4863-9d58-24930b30406c">
 React.lazy + Suspense — 기본 패턴
 </div> <div id="SE-609e37ce-4371-4f61-a29c-734a07c44c84">
 ​
React.lazy는 컴포넌트를 동적으로 import해서, 일반 컴포넌트처럼 쓰게 해줍니다. 그리고 그 컴포넌트가 로딩되는 동안 보여줄 화면은 &lt;Suspense&gt;가 담당합니다.

 </div> <div id="SE-26234b47-03ad-4b93-b314-ff5ae0158fe1">
 import { lazy, Suspense } from 'react';

// 일반 import가 아니라 () =&gt; import(...) — 번들러가 이걸 별도 파일(청크)로 쪼갠다
const SettingsPage = lazy(() =&gt; import('./pages/SettingsPage'));

function App() {
 return (
 // 로딩되는 동안 fallback을 보여준다
 &lt;Suspense fallback={&lt;p&gt;불러오는 중…&lt;/p&gt;}&gt;
 &lt;SettingsPage /&gt;
 &lt;/Suspense&gt;
 );
}
 </div> <div id="SE-f5198330-7e63-4308-961b-cbc02326625f">
 차이는 import의 위치입니다. 평소처럼 파일 맨 위에서 import SettingsPage from '...'로 가져오면 그 코드는 처음부터 번들에 포함됩니다. 반면 lazy(() =&gt; import('...'))는 그 컴포넌트가 실제로 렌더될 때 비로소 import가 실행되고, 번들러(Vite)는 이걸 감지해 SettingsPage를 별도 청크 파일로 분리합니다.
​
lazy가 받는 모듈은 default export여야 합니다. () =&gt; import('./X')가 가리키는 파일은 컴포넌트를 export default로 내보내야 lazy가 바로 쓸 수 있습니다.

 </div> <div id="SE-a57bd5a0-0f17-42a0-89ca-1038a998ffbb">
 가장 흔한 사례 — 라우트(페이지) 단위 분할
 </div> <div id="SE-87ca7a31-4835-44ef-aab0-4fe8a6b5aec0">
 ​
코드 분할의 1순위 적용처는 페이지 단위입니다. 각 페이지를 별도 청크로 두면, 사용자가 그 페이지로 갈 때만 해당 코드를 받습니다.

 </div> <div id="SE-02bc128e-572d-41b6-804a-0b018418e507">
 import { lazy, Suspense, useState } from 'react';

// 각 페이지 = 각 청크 (처음엔 홈만 받고, 설정은 갈 때 받는다)
const HomePage = lazy(() =&gt; import('./pages/HomePage'));
const SettingsPage = lazy(() =&gt; import('./pages/SettingsPage'));

function App() {
 const [page, setPage] = useState&lt;'home' | 'settings'&gt;('home');

 return (
 &lt;&gt;
 &lt;nav&gt;
 &lt;button onClick={() =&gt; setPage('home')}&gt;홈&lt;/button&gt;
 &lt;button onClick={() =&gt; setPage('settings')}&gt;설정&lt;/button&gt;
 &lt;/nav&gt;

 &lt;Suspense fallback={&lt;p&gt;페이지 불러오는 중…&lt;/p&gt;}&gt;
 {page === 'home' ? &lt;HomePage /&gt; : &lt;SettingsPage /&gt;}
 &lt;/Suspense&gt;
 &lt;/&gt;
 );
}
 </div> <div id="SE-b9d5e1e6-60fc-464c-8dc3-79d2e661b146">
 처음 앱을 켜면 홈 페이지 코드만 받습니다. "설정"을 처음 누르는 순간 SettingsPage 청크가 다운로드되고, 그동안 fallback("페이지 불러오는 중…")이 보이죠. 한 번 받은 청크는 캐시되어, 다음부턴 즉시 뜹니다. (React Router 같은 라우터를 쓰면 보통 이 패턴을 라우트별로 적용합니다.)
 </div> <div id="SE-5209a247-c9f8-4854-9acf-44c046f32b04">
 ​
페이지뿐 아니라, 무겁지만 가끔만 쓰는 컴포넌트도 좋은 후보입니다. 예를 들어 차트 라이브러리를 포함한 컴포넌트는 덩치가 큰데, 사용자가 "차트 보기"를 눌렀을 때만 받으면 됩니다.

 </div> <div id="SE-92d5fe20-a86b-4427-a1c1-67afe9a66401">
 const Chart = lazy(() =&gt; import('./Chart')); // 무거운 차트 라이브러리 포함

function Dashboard() {
 const [showChart, setShowChart] = useState(false);

 return (
 &lt;div&gt;
 &lt;button onClick={() =&gt; setShowChart(true)}&gt;차트 보기&lt;/button&gt;

 {showChart &amp;&amp; (
 &lt;Suspense fallback={&lt;p&gt;차트 로딩 중…&lt;/p&gt;}&gt;
 &lt;Chart /&gt; {/* 이 버튼을 누른 사람만 차트 코드를 받는다 */}
 &lt;/Suspense&gt;
 )}
 &lt;/div&gt;
 );
}
 </div> <div id="SE-2cf2153d-dcff-45d8-8fab-71fc2ff7df9a">
 ​
동작 원리 — import()와 Suspense
흐름을 정리하면 이렇습니다.
<ol><li>lazy(() =&gt; import('./X')) — 번들러가 X를 별도 청크로 분리.
</li><li>&lt;X /&gt;가 처음 렌더되는 순간 — import()가 실행되어 그 청크를 네트워크로 다운로드.
</li><li>다운로드되는 동안 — X는 아직 준비가 안 됐으니, React가 렌더를 잠시 보류(suspend)하고 가장 가까운 &lt;Suspense&gt;의 fallback을 보여줍니다.
</li><li>다운로드 완료 — X가 준비되면 React가 이어서 렌더해 fallback을 진짜 화면으로 교체합니다.
</li></ol>​
​
3번이 바로 이전에 맛본 Suspense의 동작입니다. "데이터가 아직 안 왔으면 보류"하던 그 메커니즘이, 여기서는 "코드가 아직 안 왔으면 보류"로 쓰이는 거죠. Fiber가 "렌더를 중단·재개"할 수 있어서 가능한 일이기도 합니다.

 </div> <div id="SE-f20b4afd-c5a0-489c-ac0f-fd2c7c0da614">
 청크 로딩 실패는 Error Boundary로
 </div> <div id="SE-879036b7-0f2b-4450-8b52-339e1c747e37">
 ​
네트워크가 끊기거나 하면 청크 다운로드가 실패할 수 있습니다. 이때 앱이 깨지지 않도록, Error Boundary로 감싸 재시도 UI를 보여주는 게 좋습니다. Error Boundary + Suspense 조합이 정석입니다.

 </div> <div id="SE-4cf09d00-dade-4f32-b28b-658b3270b4eb">
 import { ErrorBoundary } from 'react-error-boundary';

&lt;ErrorBoundary fallback={&lt;p&gt;불러오기에 실패했습니다. 새로고침 해주세요.&lt;/p&gt;}&gt;
 &lt;Suspense fallback={&lt;p&gt;불러오는 중…&lt;/p&gt;}&gt;
 &lt;SettingsPage /&gt;
 &lt;/Suspense&gt;
&lt;/ErrorBoundary&gt;
 </div> <div id="SE-e9617240-f39c-4e41-9866-b54fe34dc9ba">
 <ul><li>Suspense — 로딩 중("불러오는 중…")을 담당.
</li><li>Error Boundary — 로딩 실패("실패했습니다")를 담당.
</li></ul>
 </div> <div id="SE-2f545bbf-9f43-4d11-9576-f145c5458926">
 ​
<ul><li>lazy는 컴포넌트 바깥(모듈 최상위)에서 호출하세요. 컴포넌트 안에서 lazy(...)를 부르면 렌더마다 새로 만들어져 매번 다시 로딩됩니다.
</li><li>default export 컴포넌트를 가리켜야 합니다.
</li><li>과하게 쪼개지 마세요. 아주 작은 컴포넌트까지 청크로 나누면, 오히려 네트워크 요청만 늘어 느려질 수 있습니다. 분할은 페이지·무거운 컴포넌트 같은 "덩치 큰 단위"에 먼저 적용합니다.
</li></ul>​
​
면접 포인트 정리
<ul><li>코드 분할이란? 앱 전체를 하나의 번들로 받지 않고, 필요할 때 청크로 나눠 받는 것. 첫 로딩을 가볍게 한다.
</li><li>어떻게? const X = lazy(() =&gt; import('./X')) + &lt;Suspense fallback={...}&gt;. 동적 import()를 번들러가 청크로 분리한다.
</li><li>Suspense의 역할? 청크가 로딩되는 동안 fallback을 보여준다.
</li><li>로딩 실패는? Error Boundary로 감싼다(Suspense는 로딩, Error Boundary는 실패).
</li><li>1순위 적용처? 라우트(페이지) 단위, 그리고 무거운 컴포넌트.
</li></ul>
 </div> <div id="SE-177eaf62-312d-4cef-b04d-a43153079fed">
 ​
<ul><li>코드 분할은 앱을 하나의 큰 번들로 받지 않고, 필요한 순간 청크로 나눠 받게 해 첫 로딩을 가볍게 한다.
</li><li>lazy(() =&gt; import('./X')) + &lt;Suspense fallback&gt;이 기본 패턴. 동적 import()를 번들러(Vite)가 별도 청크로 분리한다.
</li><li>1순위는 라우트(페이지) 단위 분할, 그리고 무겁고 가끔 쓰는 컴포넌트.
</li><li>청크 로딩 중은 Suspense(fallback), 로딩 실패는 Error Boundary로 처리한다.
</li><li>lazy는 모듈 최상위에서, default export를 가리켜, 과분할 없이 쓴다.
</li></ul>​
다음 챕터에서는 Suspense를 한 단계 더 깊이 다룹니다. 데이터 로딩까지 포함해 "로딩 상태를 선언적으로 다루는" 그림을 완성합니다.

 </div> <div id="SE-8f454bee-306d-4615-9ac8-ccd990af6af1">
 ​
<ul><li>lazy — React 공식 문서 (코드 분할; 확인: 2026-06-24)
</li><li>Suspense — React 공식 문서 (fallback; 확인: 2026-06-24)
</li></ul>
 </div> </div></div>

개발하는 기획자. 기획하는 개발자.

앱이 커질수록 첫 화면이 느려집니다. 왜일까요? 기본적으로 앱의 모든 JavaScript가 하나의 큰 파일로 묶여, 첫 화면을 그리기 전에 통째로 다운로드되기 때문입니다. 설정 페이지, 관리자 화면, 무거운 차트… 사용자가 아직 보지도 않은 코드까지 전부요. 이걸 해결하는 게 코드 분할(code splitting)입니다. 이번 챕터에서 React.lazy와 Suspense로 "필요할 때만 나눠 불러오는" 법을 배웁니다. 문제 — 안 쓸 코드까지 처음에 다 받는다 핵심은 "지금 당장 필요한 코드만 받고, 나머지는 필요해지는 순간 받자"입니다. 그러면 첫 로딩이 가벼워지죠. React.lazy + Suspense — 기본 패턴 React.lazy는 컴포넌트를 동적.......

코드 분할 — React.lazy와 Suspense로 필요할 때만 불러오기

댓글