[React] Lazy와 suspence

lazy

React.lazy는 동적 import를 통해 컴포넌트를 지연 로딩(lazy loading)할 수 있도록 도와줍니다. 즉, 컴포넌트를 처음부터 모두 로딩하지 않고, 실제로 그 컴포넌트가 필요할 때 로딩합니다.
이는 번들 크기를 줄이고, 초기 로딩 시간을 단축시킬 수 있습니다.

import { lazy } from 'react';

// 동적 import를 통해 컴포넌트를 지연 로딩
const MyComponent = lazy(() => import('./MyComponent'));

Suspense

React.Suspense는 지연 로딩된 컴포넌트가 로딩되는 동안 보여줄 폴백(fallback) UI를
정의할 수 있습니다.

Suspense 컴포넌트의 fallback 속성에 로딩 중에 보여줄 컴포넌트를 지정합니다.

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

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

위 예제에서는 MyComponent가 로딩되는 동안 Loading...이라는 텍스트를 보여줍니다.
MyComponent가 로드되면, Loading... 텍스트는 사라지고, 실제 컴포넌트가 렌더링됩니다.

추가 설명

React.lazy 사용: lazy 함수를 사용해 MyComponent를 동적으로 import합니다.
이렇게 하면 MyComponent는 필요할 때까지 로딩되지 않습니다.

React.Suspense 사용: Suspense 컴포넌트를 사용해 지연 로딩된 컴포넌트가 로딩되는 동안
보여줄 폴백 UI를 지정합니다. 여기서는 Loading...이라는 텍스트를 폴백 UI로 사용했습니다.

이러한 방식으로 lazy와 Suspense를 사용하면 애플리케이션의 초기 로딩 시간을 줄이고,
사용자 경험을 향상시킬 수 있습니다.

이는 특히 대규모 애플리케이션에서 유용하며,
초기 로딩 시간을 줄여 사용자가 더 빠르게 콘텐츠를 확인할 수 있게 합니다.