react lazy

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

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

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

React.lazy는 React 라이브러리에서 제공되는 기능 중 하나로, 코드 스플리팅을 쉽게 구현할 수 있도록 도와주는 기능입니다. 코드 스플리팅은 애플리케이션 번들을 여러 개의 작은 번들로 나누는 기술로, 초기 로딩 시간을 줄이고 사용자 경험을 향상시키는 데 도움을 줍니다. React.lazy는 컴포넌트를 동적으로 로드할 때 주로 사용됩니다.

다음은 React.lazy의 주요 특징과 사용 방법에 대한 간략한 설명입니다:

1. 동적 컴포넌트 로딩: React.lazy를 사용하면 컴포넌트를 동적으로 로드할 수 있습니다. 이것은 컴포넌트가 필요한 순간에 로딩되어 초기 로딩 시간을 단축하고 애플리케이션의 성능을 최적화하는 데 도움을 줍니다.
2. 코드 스플리팅과 함께 사용: 주로 코드 스플리팅을 구현할 때 React.lazy를 사용합니다. 코드 스플리팅은 번들을 분할하여 필요한 부분만 동적으로 로드함으로써 초기 로딩 시간을 최소화합니다.
3. Suspense와 함께 사용: React.lazy로 로드한 컴포넌트는 React.Suspense 컴포넌트와 함께 사용하는 것이 일반적입니다. Suspense를 사용하면 로딩 중에 대체 콘텐츠(로딩 스피너 또는 메시지)를 표시할 수 있습니다.

위 예제에서 MyLazyComponent는 React.lazy를 사용하여 동적으로 가져온 컴포넌트입니다. Suspense 컴포넌트를 사용하여 로딩 중에 "Loading..."이라는 텍스트를 표시합니다.

React.lazy를 사용하면 애플리케이션의 성능을 향상시키고 코드 스플리팅을 구현할 수 있으며, 필요한 컴포넌트만 필요한 때에만 로드할 수 있게 됩니다.