Suspense, ErrorBoundary

<ErrorBoundary fallback={errorFallback}>
  <Suspense fallback={loadingFallback}>
    {children}
  </Suspense>
</ErrorBoundary>

✨ 어떤 기능을 하나요?

Suspense는 React의 Suspense를 클라이언트에서만 동작하도록 보장하는 리액트 컴포넌트입니다.

Suspense는 내부적으로 ClientOnly로 래핑됩니다. SSG로 빌드될 때나 하이드레이션이 이루어질 경우, fallback 엘리먼트를 렌더링하고, 마운트가 완료할 때에는 children에서 promise를 throw하면 fallback 엘리먼트를, 성공적으로 불러와졌으면 children 엘리먼트를 렌더링합니다.

ErrrBoundary는 하위 컴포넌트에서 발생한 Error를 포착해, 폴백 엘리먼트를 띄우는 리액트 컴포넌트입니다.

💡 사용 예제

function DataFetcher()
{
  const data = useQuery("/api/test", ()=>fetchData("/api/test"));
  return <div>{data}</div>
}
// ...
<ErrorBoundary fallback={<div>에러남</div>}>
  <Suspense fallback={<div>로딩중</div>}>
    <DataFetcher />
  </Suspense>
</ErrorBoundary>

useQuery 등 비동기 작업을 사용할 때, 혹은 lazy loading되는 컴포넌트를 사용할 때에는 Suspense와 ErrorBoundary를 감싼 뒤, 로딩 폴백 엘리먼트와 에러 폴백 엘리먼트를 정의해야 합니다.

저희가 사용하는 인터페이스 중, Suspense를 지원하는 비동기 인터페이스는 다음과 같습니다.

• useQuery : 인자로 key값과 promise를 반환하는 함수를 받아, promise가 진행 중에는 promise를 throw하고, 성공하면 promise의 결과값을 반환합니다.
• getQuerySuspense : useQuery와 동일한 역할을 하지만, 조건부에서 사용할 수 있습니다.

🔌 인터페이스

• fallback : children에서 promise를 throw할 때 렌더링되는 폴백 컴포넌트입니다. 모든 렌더링 가능한 리액트 요소가 들어갈 수 있습니다.
• children : 데이터를 렌더링하거나 lazy loading을 하는 모든 컴포넌트가 들어갑니다. 모든 렌더링 가능한 리액트 요소가 들어갈 수 있습니다.