React18의 <Suspense>에 대해서

Suspense는 리액트에서 기본적으로 제공하는 컴포넌트로, 자식 컴포넌트가 로딩이 될 때 까지 fallback을 보여줄 수 있다.

즉, 기존에 사용하던 isLoading 상태를 이용한 패턴을 더 간단하게 사용할 수 있게 해주는 컴포넌트이다.

 

Suspense 내부에 들어가는 Content 컴포넌트이다.

import { useEffect, useState } from "react";

let tmp = "";

const getData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      tmp = "Hello Mr.Park";
      resolve(true);
    }, 3000);
  });
};

const Content = () => {
  const [data, setData] = useState(tmp);
  if (!data) {
    throw getData();
  }
  return <div>LOADED {data}</div>;
};

export default Content;

 

실제 Suspense가 사용되는 부분이다.

import { lazy, Suspense } from "react";
import Content from "./Content";

function Loading() {
  return (
    <div>
      <span role="img" aria-label="load">
        🍘🍻🍪🍰🍧
      </span>
      is Loading
    </div>
  );
}

export default function TestSuspense() {
  return (
    <Suspense fallback={<Loading />}>
      <Content />
    </Suspense>
  );
}

 

Suspense를 제대로 사용하기 위해서는 Promise의 설정이 필요하다.

위의 예시처럼, throw를 통해서 Promise를 확인해주어야 하는 부분이 필요하다.

또한 lazy를 사용했을 때 역시 fallback을 보여줄 수 있다.

 

import React, { lazy } from 'react';
const Content = lazy(() => import("./Content"));

 

Suspense를 잘 사용하면, 리액트 컴포넌트에서 비동기 작업이 일어났을 때 해당 처리가 완료될 때 까지 fallback으로 화면을 처리할 수 있다.

 

개인적인 생각으로 이는 React Query와 함께 사용하였을 때 활용도가 극대화된다.

비동기 상태 처리를 위한 훌륭한 솔루션인 React Query는 Suspense에 대한 옵션을 가지고 있다.

이 옵션을 키면, React Query의 비동기 처리가 일어날 때 마다, isLoading이 true라면 자동으로 fallback이 처리될 것이다.

🍉 queryClient에서 전역으로 suspense를 설정할 수도 있지만, 개별적인 useQuery마다 suspense를 설정할 수도 있다.

 

 

https://react.dev/reference/react/Suspense

<Suspense> – React

https://tanstack.com/query/v4/docs/react/guides/suspense#resetting-error-boundaries

Suspense | TanStack Query Docs