리액트 Suspense & lazy

리액트 Suspense와 lazy는 코드 스플리팅을 쉽게 구현할 수 있도록 도와주는 유용한 기능입니다. 코드 스플리팅은 애플리케이션의 성능을 향상시키기 위해 필요한 코드를 필요한 시점에 불러올 수 있는 기술로, 큰 규모의 React 애플리케이션에서 매우 중요합니다.

리액트의 lazy() 함수는 동적 import()를 사용해 컴포넌트를 로드하는 데 사용됩니다. 동적 import는 컴포넌트가 필요할 때만 로드하도록 합니다. Suspense는 렌더링이 완료되기 전까진 로딩 인디케이터나 다른 컴포넌트를 렌더할 수 있게 해주는 기능입니다.

예제:

App.js

javascriptimport React, { lazy, Suspense } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));

export default function App() {
  return (
    <div>
      <Suspense fallback={<div>로딩 중...</div>}>
        <MyComponent />
      </Suspense>  
    </div>
  );
}

MyComponent.js

javascriptimport React from 'react';

function MyComponent() {
  return (
    <div>
      이 컴포넌트는 필요할 때 로드됩니다!
    </div>
  );
}

export default MyComponent;

1. lazy() 함수와 import() 함께 사용하여 컴포넌트를 동적으로 가져옵니다.
2. 원하는 위치에서 <Suspense> 컴포넌트로 감싸고 fallback prop을 사용하여 렌더링 되기 전에 보여줄 기본 로딩 컴포넌트를 설정합니다.

위의 예제에서는 App 컴포넌트가 처음 렌더링 될 때, MyComponent가 로드되지 않습니다. 사용자가 브라우저에서 MyComponent가 필요한 시점에 도달하면, 해당 컴포넌트를 로드하고 렌더링됩니다. 로딩 도중에는 "로딩 중..." 메시지가 나타납니다.

이러한 방식을 통해 적절한 코드 스플리팅과 성능 최적화를 달성할 수 있습니다.