7관문. Code Splitting

관문 7 / 7

React.lazy와 Suspense로 무거운 컴포넌트를 분리하여 초기 번들 크기를 줄여라.

📖 이론 비급

Code Splitting: 번들 분할 전략

모든 코드를 하나의 번들로 보내면 초기 로딩(FCP, LCP)이 느려진다. React.lazy(() => import('./HeavyComponent'))로 동적 import를 사용하면 해당 컴포넌트가 실제로 필요한 시점에만 청크를 다운로드한다.

분할 단위:

라우트: 각 페이지를 별도 청크로
무거운 라이브러리: 차트, 에디터, PDF 뷰어 등
조건부 컴포넌트: 모달, 관리자 패널 등

⚔️ 수련 코드

import { lazy, Suspense, useState } from 'react';

// TODO: lazy로 무거운 컴포넌트를 동적 import하라
// import HeavyChart from './HeavyChart'; // 기존 방식
const HeavyChart = lazy(() => import('./HeavyChart'));

// HeavyChart.js (동일 폴더에 생성)
// export default function HeavyChart() {
//   return <div style={{ height: 300, background: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>무거운 차트 컴포넌트</div>;
// }

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

  return (
    <div>
      <button onClick={() => setShowChart(true)}>차트 표시</button>
      {showChart && (
        // TODO: Suspense와 fallback을 추가하라
        <HeavyChart />
      )}
    </div>
  );
}

Open Sandbox