React Suspense

React Suspense란?

Suspense는 자식 요소를 로드하기 전까지 화면에 대체 UIFallback를 보여줍니다.

Props 로는 자식요소인 children을 궁극적으로 render 시키려고 하는 요소로 사용이 되고 보통
children이 render 되기전까지는 fallback 요소인 ui를 노출 시켜준다.
하지만 보통 로딩 스피너나 스켈레톤처럼 간단한 Placeholder를 활용합니다. Suspense는 children의 렌더링이 지연되면 자동으로 fallback으로 전환하고, 데이터가 준비되면 children으로 다시 전환합니다. 만약 fallback의 렌더링이 지연되면, 가장 가까운 부모 Suspense가 활성화됩니다.

사용법

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

이런식으로 fallback 요소를 담아주고 props인 children 요소를 감싸주면 된다.

이게 제일 간단한 사용법이고
현재는 여러 가지 사용법이 있으며 각각의 요소에 대한 사용법이 많다.

사용법
콘텐츠를 로딩하는 동안 대체 UIFallback 보여주기
콘텐츠를 한꺼번에 함께 보여주기
중첩된 콘텐츠가 로딩될 때 보여주기
새 콘텐츠가 로딩되는 동안 이전 콘텐츠 보여주기
이미 보인 콘텐츠가 숨겨지지 않도록 방지
Transition이 발생하고 있음을 보여주기
Navigation에서 Suspense 재설정하기
서버 에러 및 클라이언트 전용 콘텐츠에 대한 Fallback 제공