번들링과 코드스플리팅

번들링이란?

번들링(bundling)은 애플리케이션의 여러 파일(예: JavaScript, CSS, 이미지 등)을 하나 또는 여러 개의 번들 파일로 결합하여 웹 브라우저가 더 효율적으로 로드할 수 있도록 하는 프로세스를 의미합니다.

코드스플러팅이란?

코드 스플리팅(Code Splitting)은 웹 애플리케이션에서 전체 코드베이스를 한 번에 로드하지 않고
필요한 부분만 나누어 로드하는 기법입니다.
초기 로딩 시간을 줄이고, 사용자 경험을 개선할 수 있습니다.

React.lazy와 Suspense를 이용한 코드 스플리팅

React.lazy :

React.lazy는 동적으로 컴포넌트를 불러오는 기능을 제공합니다.
특정 컴포넌트가 필요한 시점에만 로드되도록 할 수 있습니다.

Suspense :

Suspense는 로딩 중 상태를 처리하는 역할을 합니다.
React.lazy를 사용하여 동적 로딩을 할 때, 로드되는 동안 표시할 대체 UI(예: 로딩 스피너)를 제공할 수 있습니다.

예제: React.lazy와 Suspense를 사용한 코드 스플리팅

import { Suspense } from 'react';

// MyComponent를 동적으로 로드
const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <h1>My React App</h1>
      
      {/* Suspense를 사용하여 로딩 상태를 처리 */}
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

export default App;

코드설명:

1. React.lazy(() => import('./MyComponent')):
   MyComponent를 동적으로 import하여 필요할 때만 로드합니다.
   이 코드는 JavaScript 청크로 분리되어 브라우저가 필요할 때 로드하게 됩니다.
2. <Suspense fallback={<div>Loading...</div>}>: Suspense는 동적 로딩이 이루어질 때 "Loading..."
   이라는 텍스트를 표시합니다. fallback 속성에는 로딩 중 표시할 UI를 정의합니다. UI는 컴포넌트가 로드될 때까지 화면에 표시됩니다.
3. Suspense 내에 동적 로딩된 MyComponent가 렌더링됩니다. 로딩이 완료되면 MyComponent가 화면에 표시됩니다.