[ React ] Suspense란 무엇일까?

 

React의 Suspense는 React 18에서 정식으로 지원된 비동기 처리를 지원하는 React의 내장 컴포넌트로, 비동기 처리가 진행되는 동안, 사용자에게 로딩에 대한 상태를 보여주는 기능을 제공한다.

 

 

 

Suspense는 Suspense의 경계를 설정하고, 경계 내에서 비동기적으로 로드되는 컴포넌트나 데이터에 대한 로딩 상태를 관리한다. 이런 로딩 상태는 fallback프로퍼티를 통해 사용자에게 표시된다. Suspense의 자식 컴포넌트(children)가 실제 비동기 처리 이후에 렌더링 되는 컴포넌트이다.

 

 

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

 

 

위와 같이 <Suspense>{children}</Suspense>로 사용되며, React Suspense는 주로 React 애플리케이션의 비동기 데이터 로딩을 위해 사용되는 React.lazy와 함께 사용된다.(React.lazy는 동적으로 가져오는 컴포넌트를 정의할 때 사용되어, 컴포넌트를 필요로 하는 시점에서만 해당 컴포넌트를 로드할 수 있다.)

 

React.lazy는 Suspense 컴포넌트와 함께 사용하여 더욱 유용하게 사용할 수 있으며, Suspense 컴포넌트는 React.lazy로 로드하는 동안 일시적으로 다른 내용을 렌더링할 수 있게된다.

 

 

 

<Suspense fallback={<Loading />}>
  <Details artistId={artist.id} />
</Suspense>

function Details({ artistId }) {
  return (
    <>
      <Biography artistId={artistId} />
      <Panel>
        <Albums artistId={artistId} />
      </Panel>
    </>
  );
}

위와 같이 직접적인 자식 컴포넌트가 아니더라도 정상적으로 동작한다. (이동 가능)

 

 

 

 

 

 

 

 

 

---

 

🌸 출처 🌸

 

Suspense - React

React18