React.Suspense 사용하기

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

<Suspense> – React

• <Suspense>하위 항목이 로드를 완료할 때까지 대체를 표시할 수 있다.
• React.Suspense는 React에서 비동기적으로 데이터나 컴포넌트를 불러오는 과정에서 대기 상태를 처리하기 위한 컴포넌트이다.
• 이 컴포넌트를 사용하면 데이터나 컴포넌트가 로딩되기를 기다릴 수 있으며, 로딩 중에는 대체 컨텐츠(로딩 스피너 또는 로딩 메세지)를 표시할 수 있다.
• React.Suspense를 사용하면 코드 스플리팅, 데이터 로딩, 서버 사이드 렌더링과 같은 시나리오에서 사용자 경험을 향상시키는데 도움이 된다.

 

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

• children: 렌더링하려는 실제 UI. 렌더링하는 동안 일시 중지 되면 children Suspense 경계가 렌더링으로 전환된다
• fallback: 로드가 완료되지 않은 경우 실제 UI 대신 렌더링할 대체 UI.