[React] Suspense

1. React Suspense

 

• 비동기 작업이 진행되는 동안 보여줄 다른 컴포넌트를 정의할 수 있다. 
• 네트워크를 통해 코드 분할 구서 요소를 가져올 때 사용자가 경험하는 약간의 지연의 시간에 유용한 로드 상태를 표기할 수 있게 된다. 

 

2. React.lazy

 

• 동적 import를 사용해서 컴포넌트를 랜더링 할 수 있다. 
• React 애플리케이션이 챈더링 초기에 모든 import를 처리하지 않게 할 수 있어 성능 향상에 도움이 된다. 
• 즉 코드 분할 및 지연 로딩을 가능하게 해준다.  

 

3. 사용흐름

• MyComponent가 처음 렌더링 될 때 OtherComponent를 포함한 번들을 자동으로 불러옵니다.
• React.lazy는 동적 import()를 호출하는 함수를 인자로 가집니다. 이 함수는 React 컴포넌트를 포함하며 default export를 가진 모듈로 결정되는 Promise로 반환해야 합니다.
• lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 하며, Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 해줍니다.
• fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 렌더링하려는 React 엘리먼트를 받아들입니다. Suspense 컴포넌트는 lazy 컴포넌트를 감쌉니다. 하나의 Suspense 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있습니다.

import React, { Suspense } from 'react';

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

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

4. 추가 

• Suspense의 또 다른 기능은 여러 구성 요소가 모두 지연 로드된 경우에도 로드에서 여러 구성 요소를 일시 중단 할 수 있다.  (Suspense 내부에 여러개의 컴포넌트가 있는 경우)

 

https://web.dev/i18n/ko/code-splitting-suspense/

React.lazy 및 Suspense를 사용한 코드 분할