[React] React.lazy와 Suspence

React.lazy와 Suspence

React.lazy & Suspence는 React 16.6에서 소개된 기능으로, 성능 최적화와 사용자 경험 개선을 목적으로 반영되었다.

lazy – React

이전 웹 애플리케이션은 사용자가 아직 필요로 하지 않는 코드까지도 전부 불러와야 했다(SPA의 특징).

이는 애플리케이션의 초기 로딩 속도를 증가시키고 성능 저하로 이어질 수 있다.

React.Lazy&Suspence는 이 문제를 해결하기 위해 등장했는데, 개발자가 동적으로 컴포넌트를 로드할 수 있게 하여 애플리케이션의 번들 크기를 줄이고, 초기 로딩 성능을 개선할 수 있게 해준다.

React.lazy

컴포넌트를 동적으로 로드할 때까지 로딩을 지연시키는 데 사용된다.
React.lazy는 아래와 같이 import() 함수와 함께 사용하며, 컴포넌트를 한 번에 렌더링 하지 않고 동적으로 가져올 수 있게 된다.

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

// LazyComponent를 동적으로 import, 실제로 필요할 때까지 로드되지 X.
const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      {/* Suspense 컴포넌트를 사용하여 LazyComponent가 로드될 때까지 대기 */}
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

Suspence

Suspense는 React가 컴포넌트의 렌더링을 대기할 수 있도록 해준다.

그리고 컴포넌트가 로드될 때까지 fallback 프로퍼티에 지정된 로딩 인디케이터나 스켈레톤을 보여줄 수 있다.

Suspence는 다음과 같은 역할을 한다.

1. 비동기 데이터 로드
   - 비동기 작업 혹은 외부 데이터를 가져오는 동안 로딩 상태를 보여줄 수 있다.
2. 코드 스플리팅
   - 코드 스플리팅(React.lazy)과 함께 사용하여 앱 번들의 크기를 줄이고 로딩 속도를 최적화할 수 있다.
   - 필요한 컴포넌트만 로드하고 사용자가 해당 컴포넌트를 요청할 때까지 다른 컴포넌트를 로드하지 않도록 한다.

 

cc. https://www.daleseo.com/react-suspense/