[React] Suspense

Suspense 컴포넌트

<Suspense> 컴포넌트는 자식 요소가 로드되기 전까지 화면에 대체 UI를 보여주는 역할을 하는 컴포넌트이다.

React 16.6부터 도입된 기능으로, 주로 비동기 렌더링을 지원하기 위해 사용된다.

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

Props

• children : 궁극적으로 렌더링하려는 실제 UI이다. children의 렌더링이 지연되면, Suspense는 fallback을 대신 렌더링한다.
• fallback : 실제 UI가 로드되기 전까지 대신 렌더링 되는 대체 UI이다. Suspense는 children의 렌더링이 지연되면 자동으로 fallback으로 전환하고, 데이터가 준비되면 children으로 다시 전환한다. 만약 fallback의 렌더링이 지연되면, 가장 가까운 부모 Suspense가 활성화 된다.

사용법

콘텐츠가 로드되는 동안 대체 UI 보여주기

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

Albums가 렌더링될 때까지 Loading 컴포넌트를 대신 화면에 보여준다.

콘텐츠를 한꺼번에 함께 보여주기

<Suspense fallback={<Loading />}>
  <Biography />
  <Panel>
    <Albums />
  </Panel>
</Suspense>

Biography와 Albums는 단일 Suspense 아래에 그룹화되어 있기 대문에 항상 동시에 함께 렌더링된다.