Reference

*<Suspense>는 자식 요소들의 로딩이 완료될 때까지 대체 콘텐츠를 보여줄 수 있게 해줍니다.*

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

Props

children **

렌더링하려는 실제 UI 입니다. 만약 children이 렌더링하는 동안 중단되면, Suspense 경계는 대체 콘텐츠를 렌더링합니다.

fallback

만약 실제 UI가 로딩이 완료되지 않았을 경우 대신 렌더링할 대체 UI입니다.

유효한 React 노드이지만, 실제로는 로딩 스피너나 스켈레톤과 같은 가벼운 플레이스홀더 뷰로 사용됩니다. Suspense는 children이 중단될 때 자동으로 fallback으로 전환합니다.

만약 fallback이 렌더링하는 동안 중단된다면 가장 가까운 부모 Suspense 경계를 활성화합니다.

주의사항(Caveats)

• React는 처음으로 마운트되기 전에 중단된 렌더들에 대해 어떠한 상태도 보존하지 않습니다. 컴포넌트가 로드된 경우, React는 중단된 렌더들을 처음부터 다시 렌더링하려고 시도합니다.
• 만약 Suspense가 콘텐츠를 표시하고, 다시 중단된 경우(children 언마운트), 해당 업데이트가 startTransition이나 useDeferredValue로 인해 발생하지 않는 한, 대체 콘텐츠(fallback이 렌더링)가 다시 표시됩니다.

Suspense 경계

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

로딩되는 동안 중첩된 콘텐츠 공개하기