[React 공식 문서] <Suspense>

 

 

<Suspense>

자식이 로딩을 완료할 때까지 폴백을 표시할 수 있다.

즉, 비동기 작업(코드 스플리팅, 데이터로딩)을 처리하는 동안 로딩 상태에서 대체 콘텐츠를 표시한다.

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

 

 

Props

children

: 렌더링하려는 실제 UI

  렌더링하는 동안 children이 일시 중단되면 suspense 경계가 fallback 렌더링으로 전환된다.

fallback

: 로딩이 완료되지 않은 경우에 실제 UI 대신 렌더링할 대체 UI이다.
  주로 로딩 스피너나 스켈레톤과 같은 가벼운 플레이스홀더 뷰를 사용한다.

  Suspense는 children이 일시 중단되면 자동으로 fallback으로 전환되고, 데이터가 준비되면 children으로 전환된다.

 

 

주의사항

• React는 처음 마운트하기 전에 일시 중단된 렌더링의 state를 보존하지 않는다.
  컴포넌트가 로드되면, 일시 중단된 트리의 렌더링을 처음부터 다시 시도한다.
• Suspense가 트리에 대한 콘텐츠를 표시하고 있다가 다시 일시 중단된 경우,
  그 원인이 된 업데이트가 startTransition 이나 useDeferredValue가 아니라면, fallback이 다시 표시된다.
• 일시중단되어 이미 표시된 콘텐츠를 숨겨야 하는 경우, 콘텐츠 트리에서 layout Effect를 클린업 한다.
  다시 표시될 준비가 되면 layout Effect를 다시 실행한다.
  이를 통해 콘텐츠가 숨겨져있는 동안 DOM 레이아웃을 측정하는 Effect가 해당 작업을 시도하지 않도록 한다.
•  Suspense와 통합된 스트리밍 서버 렌더링 및 선택적 Hydration과 같은 내부 최적화가 포함되어 있다. 

 

Usage

콘텐츠 로딩하는 동안 폴백 표시

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

자식 Albums에 필요한 모든 코드와 데이터가 로드될 때까지 로딩폴백을 표시한다.

Suspense 내부 전체 트리는 단일 단위로 취급되기 때문에, 여러 컴포넌트가 있다면
모든 항목이 표시될 준비가 된 후 한꺼번에 표시할 수도 있다.

 

 

 

중첩된 콘텐츠가 로드될 때 표시

<Suspense fallback={<BigSpinner />}>
  <Biography />
  <Suspense fallback={<AlbumsGlimmer />}>
    <Panel>
      <Albums />
    </Panel>
  </Suspense>
</Suspense>

컴포넌트가 일시 중단되면 가장 가까운 상위 Suspense 컴포넌트가 폴백을 표시한다.

이를 통해 여러 Suspense 컴포넌트를 중첩하여 로딩 시퀀스를 만들 수 있다.

 

[순서]

1. Biography가 아직 로드되지 않은 경우 전체 콘텐츠 영역 대신 BigSpinner가 표시된다.

2. BIography 로드가 완료되면 BigSpinner가 콘텐츠로 대체된다.

3. Albums가 아직 로드되지 않은 경우, Albums 및 그 부모 Panel 대신 AlbumsGlimmer가 표시된다.

4. Albums 로딩이 완료되면 Albums가 AlbumsGlimmer를 대체한다.

 

 

 

새 콘텐츠가 로드되는 동안 오래된 콘텐츠 표시

이미 표시된 콘텐츠가 숨겨지지 않도록 방지

트랜지션이 발생하고 있음을 나타냄

탐색시 Suspense 경계 재설정

서버 오류 및 서버전용 콘텐츠에 대한 폴백 제공