[React] TanStack Query 에서 Suspense 사용 (+ ErrorBoundary)

☘️ 시작하며...

React 18 의 기능으로 Suspense 가 있다. 그러면 Suspense 가 무엇일까?

 

Suspense
하단에 있는 일부 컴포넌트가 아직 렌더링할 준비가 되지 않은 경우 로딩을 나타낼 수 있도록 해주는 것
[출처]: 공식문서

이러한 Suspense 를 서버 상태관리 라이브러리인 TanStack Query(React Query) 와 함께 안정적으로 사용할 수 있다. 그래서 어떻게 사용하지는 지 알아볼 예정이다.

 

☘️ Suspense

만약 TanStack Query 에 대해 잘 모를 경우 해당 게시물에서 이에 대한 내용을 확인할 수 있다.

 

Suspense 세팅

React 에 내장된 Suspense 을 import 해주고

import React, { Suspense } from 'react';

Suspense 컴포넌트를 내 어플리케이션 상위에 배치하고, 자식 컴포넌트의 데이터가 로드될 때 까지 fallback 에 있는 내용을 렌더링 한다.

<Suspense fallback={<h1>데이터 가져오는 중</h1>}>
  <App />
  <ReactQueryDevtools initialIsOpen={false} />
</Suspense>

 

useSuspenseQuery 세팅

React의 Suspense 와 함께 사용할 수 있는 TanStack Query 의 전용 Hook 을 이용한다.

• useSuspenseQuery - 쿼리 한 개
• useSuspenseInfiniteQuery - 무한 쿼리
• useSuspenseQueries - 쿼리 여러 개

 

나는 쿼리 여러 개를 동시에 호출하였기 때문에 useSuspenseQueries 를 import 하였다.

import { queryOptions, useSuspenseQueries } from '@tanstack/react-query';

그리고 useSuspenseQueries 를 사용하여 쿼리 함수들을 요청했다.

const queryResult = useSuspenseQueries({
  queries: [
    { ...testOption.test(1) },
    { ...testOption.test(2) },
    { ...testOption.suspense() },
  ],
});

 

Suspense 결과

데이터를 다 요청받아 로드 되기 전까지 Suspense 컴포넌트 안에 있는 fallback 의 내용이 보이는 것을 확인할 수 있다.
이렇게 간편하게 관리를 할 수 있다.

 

☘️ ErrorBoundary

데이터가 다 로드 되기 전에는 Suspense 를 사용하면 된다.
그러면 만약에 에러가 발생할 경우에는 어떻게 해야 될까? 바로 ErrorBoundary 를 사용하면 된다.

 

ErrorBoundary 세팅

ErrorBoundary 를 사용하기 위해 먼저 해당 라이브러리를 설치해야 한다.

npm install react-error-boundary

ErrorBoundary 를 import 하고

import { ErrorBoundary } from 'react-error-boundary';

Suspense 컴포넌트 상위에 배치하고 에러가 발생했을 때 fallback 에 있는 내용이 렌더링 된다.

<ErrorBoundary fallback={<h1>에러 발생</h1>}>
  <Suspense fallback={<h1>데이터 가져오는 중</h1>}>
    ... 생략
  </Suspense>
</ErrorBoundary>

 

ErrorBoundary 결과

데이터를 로드하는데 일정 시간이 지나도 데이터를 로드하지 못해 에러가 발생하면 fallback 에 있는 내용이 렌더링 된 것을 확인할 수 있다.