Suspense란?

suspense는 React v18에 새로 업데이트 된 기능이다.

공식 문서에서 suspense에 대한 설명은 "Suspense is lets you display a fallback until its children have finished loading." 라고 설명이 나와있다.

즉 suspense를 사용하면 컴포넌트 렌더링이 끝날 때까지 다른 컴포넌트를 먼저 렌더링을 시켜주는 기능이라고 할 수 있다.

프로젝트를 하면서 로딩처리와 에러처리를 귀찮다고 생각했던 나에게 딱 맞는 기능인 것 같다.

Code

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

Suspense 태그 안에 있는 SomeComponent의 렌더링이 완료되기 전까지 Loading이란 컴포넌트가 나오게 된다.

정말 단순하면서 유용한 기능이라고 생각된다.

그리고 마침 배우고 있는 TanStack Query(React Query)에도 사용을 해봤다.

Code

// TanStack Query 설정
  const result = useQuery({
    queryKey: ["posts"],
    queryFn: getPosts,
    suspense: true, // suspense 값을 true로 설정해줘야 사용이 가능하다.
  });

// suspense 사용
function HomePage() {
  return (
    <Suspense fallback={<div>로딩중...</div>}>
      <DataTest /> // DataTest의 렌더링이 끝날 때까지 "로딩중"이라는 텍스트가 나온다.
    </Suspense>
  );
}

완성!