React Suspense란?

Suspense 는 자식 요소가 로드되기 전까지 화면에 대체 UI를 보여줍니다.

공식문서
공식문서에서는 위와 같이 설명을 하고 있습니다.

위에 설명이 되어있는 것처럼 Suspense안에 들어있는 컴포넌트가 로딩되기 전에 대체 ui를 보여주는 역할을 합니다.

Prop

Prop으로는 children렌더링 되야하는 컴포넌트가 들어가고 컴포넌트가 렌더링되는 동안 대신 보일 컴포넌트로 fallback을 받습니다.

공식문서 설명은 아래와 같이 나와있습니다.

• children: 궁극적으로 렌더링하려는 실제 UI입니다. children의 렌더링이 지연되면, Suspense는 fallback을 대신 렌더링합니다.
• fallback: 실제 UI가 로드되기 전까지 대신 렌더링 되는 대체 UI입니다. 올바른 React node 형식은 무엇이든 대체 UI로 활용할 수 있지만, 실제로는 보통 로딩 스피너나 스켈레톤처럼 간단한 placeholder를 활용합니다. Suspense는 children의 렌더링이 지연되면 자동으로 fallback으로 전환하고, 데이터가 준비되면 children으로 다시 전환합니다. 만약 fallback의 렌더링이 지연되면, 가장 가까운 부모 Suspense가 활성화됩니다.

공식문서 주위사항으로 아래와 같은 내용들이 있습니다.

주의 사항

• React는 컴포넌트가 처음으로 마운트 되기 전에 지연된 렌더링을 하는 동안의 어떤 state도 유지하지 않습니다. 컴포넌트가 로드되면 React는 일시 중지된 트리를 처음부터 다시 렌더링합니다.
• Suspense가 트리의 콘텐츠를 보여주고 있을 때 또다시 지연되면 startTransition나 useDeferredValue로 인한 업데이트가 아닌 한, fallback이 다시 보입니다.
• React가 다시 일시 중지되어 보이는 콘텐츠를 숨겨야 하는 경우, 콘텐츠 트리에서 Layout Effect들을 정리합니다. 콘텐츠가 다시 보일 준비가 되면 React는 Layout Effect들을 다시 실행합니다. 이로써 DOM 레이아웃을 측정하는 Effect가 콘텐츠가 숨겨져 있는 동안 동작하지 않도록 보장합니다.

사용법

사용 법은 아래와 같이 Suspense로 렌더링될 컴포넌트를 감싸고 감싼 컴포넌트가 렌더링 되는 동안 보여줄 컴포넌트를 fallback으로 작성하게 됩니다.

// 리엑트 공식문서 예시
import { Suspense } from 'react';
import Albums from './Albums.js';

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Suspense fallback={<Loading />}>
        <Albums artistId={artist.id} />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>🌀 Loading...</h2>;
}

위와 같이 컴포넌트가 데이터를 fetch하고 렌더링 되는동안 대신한 ui를 보여주는 기능을 주 목적으로 합니다.

마치며...

제가 저번 글에서 사용했던 Suspense는 빌드 오류를 해결하기 위해서 사용했지만 제대로 사용하기 위해서 다시 수정을 해야될 꺼 같습니다.

Suspense를 제대로 알아보면서 사용하는 이유와 최적화가 된다는 것을 알았기 때문에 어떻게 구별하여 사용해야 할지는 이제 정해봐야 할꺼 같습니다.