리액트 <Suspense> 컴포넌트 정리

React의 <Suspense> 컴포넌트란?

React의 <Suspense> 컴포넌트는 자식 컴포넌트를 렌더링하기 전에 필요한 데이터를 로드하는 동안 대체 UI(Fallback) 를 보여주는 역할을 합니다.

즉, 비동기적으로 데이터를 가져오거나 코드 스플리팅을 통해 컴포넌트를 동적으로 로드할 때, 사용자에게 로딩 중임을 알리는 UI를 제공하는 기능입니다.

---

<Suspense>의 Props

<Suspense>는 다음과 같은 props를 가집니다:

• children
  최종적으로 렌더링할 실제 UI입니다.
  children의 렌더링이 지연되면, 대신 fallback이 렌더링됩니다.

• fallback
  실제 UI가 준비되기 전까지 표시될 대체 UI입니다.
  React 노드 형태의 어떤 요소든 사용 가능하지만, 일반적으로는 로딩 스피너나 스켈레톤처럼 간단한 Placeholder가 자주 사용됩니다.
  children의 로딩이 완료되면 React는 fallback을 숨기고 children을 화면에 렌더링합니다.

만약 fallback 자체의 렌더링도 지연된다면, 가장 가까운 상위 <Suspense>가 대신 fallback을 처리하게 됩니다.

---

사용 예시

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

위 코드에서는 <Albums /> 컴포넌트가 데이터를 불러오는 동안 <Loading /> 컴포넌트가 대신 화면에 표시됩니다.
모든 데이터가 준비되면 React는 <Loading />을 제거하고 <Albums />를 렌더링합니다.