React Suspense

Suspense란?

React의 내장 컴포넌트로, 비동기 작업 중에 대체 UI를 표시하는 데 사용된다. 주로 데이터 패칭과 같은 비동기 작업을 수행하는 컴포넌트를 감싸서 데이터가 로드되는 동안 사용자에게 로딩 상태를 보여줄 수 있다. 

주요 기능:

• 로딩 상태 관리: 비동기 작업이 완료될 때까지 대체 UI(fallback)를 보여줄 수 있다.
• 비동기 컴포넌트 렌더링: 컴포넌트가 필요한 데이터를 모두 로드한 후에만 해당 컴포넌트를 렌더링한다

<Suspense fallback={<div>Loading...</div>}> {/* 데이터 로딩 중에 표시할 UI */}
    <SomeAsyncComponent /> {/* 비동기 작업을 수행하는 컴포넌트 */}
</Suspense>