[ReactJS] React.lazy() API ; 필요한 컴포넌트만 동적 로드하는 API

React.lazy()는 코드 스플릿팅과 함께 사용하여 필요한 컴포넌트만 동적으로 로드할 수 있도록 하는 React API입니다. 이를 사용하면 초기 로드 시간을 단축하고 애플리케이션의 성능을 향상시킬 수 있습니다.

 

다음은 React.lazy()의 예시입니다.

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

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

function App() {
  return (
    <div>
    //<LazyComponent/> 가 렌더링 되기 전에 Loading... 을 화면에 보여줍니다.
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

 

위 예시에서는 App 컴포넌트에서 LazyComponent를 동적으로 로드하고 있습니다. 이를 위해 React.lazy()를 사용하였습니다. LazyComponent는 import() 함수를 사용하여 로드되며, 이를 통해 필요한 시점에만 로드할 수 있습니다.

 

Suspense 컴포넌트는 fallback props를 통해 LazyComponent가 로드될 때까지 보여줄 로딩 화면을 지정할 수 있습니다. 

예시에서는 "Loading..."이라는 간단한 텍스트를 fallback으로 사용하고 있습니다.

 

React.lazy()는 주로 대규모 애플리케이션에서 사용됩니다. 대규모 애플리케이션에서는 많은 수의 컴포넌트가 있기 때문에, 모든 컴포넌트를 초기 로드 시점에서 불러오면 애플리케이션의 초기 로드 시간이 길어질 수 있습니다. 이를 방지하기 위해 React.lazy()를 사용하여 필요한 컴포넌트만 동적으로 로드할 수 있습니다.