React lazy

개념

react의 React.lazy() 함수는 코드 스플리팅(Code Splitting)을 위한 동적 컴포넌트 로딩을 지원하는 기능이다. 코드 스플리팅은 애플리케이션 번들을 작은 조각으로 나누어 초기 로딩 시간을 최적화하는 기술이다.

코드 스플리팅과 Lazy Loading

코드 스플리팅을 통해 애플리케이션 번들을 세분화하여 사용자가 해당 기능을 요청할 때만 필요한 코드를 로드할 수 있다. 이는 초기 로딩 시간을 줄이고 사용자 경험을 향상시키는 효과가 있고, react의 단점인 오래 걸리는 초기 로딩 속도를 보완할 수 있다. React.lazy()는 이러한 코드 스플리팅을 위해 사용되며, 동적으로 컴포넌트를 로딩할 때 유용하다.

React.lazy() 사용법

React.lazy()는 동적 import() 함수를 받아 컴포넌트를 렌더링하는 데 사용된다.

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

위의 코드에서 MyComponent를 동적으로 가져와야 할 때 사용된다. 이는 해당 컴포넌트가 실제로 렌더링되기 전까지 로딩되지 않음을 의미한다.

Suspense와 함께 사용

lazy를 통해 import 하면 해당 path로 이동할때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생기게 된다. 때문에 이러한 짧은 시간을 커버하기 위한 기능인 Suspense 컴포넌트를 부모 컴포넌트로 감싸줘야 한다. Suspense 컴포넌트의 fallback prop을 통해서 로딩 중일 때 보여줄 컨텐츠를 설정할 수 있다.

import React, { Suspense, type FC } from 'react';

const App: FC = () => {
  
  return (
    <Suspense fallback={<div>loading...</div>}>
      <MyLazyComponent />
    </Suspense>
  );
}

export default App;

주의사항

• React.lazy()는 함수 컴포넌트와 함께만 사용 가능하다.
• SSR(서버 사이드 렌더링)에서는 현재 지원되지 않는다.
• 동적 import() 기능을 지원하는 번들러(Webpack 등)에서만 작동한다.

적용하기 좋은 예시

lazy()는 주로 페이지가 큰 컴포넌트를 로딩할 때 혹은, 사용자가 해당 경로(페이지)를 이용하는 경우가 적을 때 이용하면 좋다. 아래는 lazy()가 적용될 수 있는 페이지 유형의 예시이다.

• 대규모 대시보드
  다양한 차트와 복잡한 테이블, 데이터 등의 요소를 가진 대규모 대시보드에 적용하면 좋다. 사용자가 특정 차트 또는 섹션을 클릭할 때 해당 섹션만 로드되도록 lazy()를 사용할 수 있다.

• 관리자 페이지
  관리자 페이지는 일반 유저들은 볼 수 없고, 극소수의 관리자 유저만 이용할 수 있는 페이지이다. 따라서 일반 유저는 관리자 페이지에 대한 정보가 필요 없기 때문에 적용하면 좋다.

• 프로필 페이지
  프로필 페이지에는 여러 섹션(개인 정보, 포스트, 사진 등)이 있을 수 있다. 각 섹션을 분리된 컴포넌트로 만들고, 필요한 섹션만 로딩하여 초기 로딩 시간을 최적화할 수 있다.

• 모달 또는 팝업
  모달창이나 팝업을 사용하는 경우 해당 컴포넌트를 lazy 로딩하여 처음 페이지를 로드할 때 불필요한 자원을 절약할 수 있다.

• 라우트 기반 코드 스플리팅
  라우팅을 기반으로 페이지를 나눌 때, 각 라우트에 해당하는 페이지 컴포넌트를 lazy하게 로딩하여 사용자가 해당 페이지로 이동할 때 로딩 시간을 최소화할 수 있다.

이러한 예시들은 lazy 로딩을 통해 초기 로딩 속도를 최적화하고 필요한 컴포넌트만 로딩하여 사용자 경험을 향상시킬 수 있는 상황들이다. 페이지가 크거나 많은 컴포넌트를 포함하는 경우에 특히 유용하게 사용될 수 있다.