[React] Suspense 사용해보기

https://react.dev/reference/react/Suspense

<Suspense> – React

 

자식 요소를 로드하기 전 까지 화면에 대체 UI를 보여주는 React가 제공하는 컴포넌트.

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

//---------------------------------------------------

import { Suspense } from 'react';

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

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

 

자식 요소의 컨텐츠가 로드되는 동안 보여지는 UI로, 사용자 경험 개선 효과를 제공한다

 

 

fallback : 실제 UI가 로드되기 전까지 대신 렌더링 되는 UI

children : 궁극적으로 렌더링하려는 UI, children의 렌더링 지연 시 fallback이 렌더링됨

lazy : 동적 임포트를 통해 컴포넌트를 필요한 시점에 로딩 - 초기 번들 크기 감소

 

초기 렌더링 시 bundle.js에 Suspense가 적용되지 않은 요소들을 불러옴

이후 Suspense 컴포넌트 호출 시 필요한 파일을 요청

lazy loading을 통한 비동기 호출 후 pending되는 동안 노출될 대체 컴포넌트의 역할

 

 

 

Suspense 내부의 트리는 하나의 단위로 취급되어 이 중 하나라도 지연되면 모든 구성 요소가 fallback으로 대체된다.

 

데이터를 로딩하는 컴포넌트가 Suspense의 직접적인 자식일 필요는 없다.

 

 

--추후수정