[React] 간단하게 로딩처리 해버리기 #useSuspenseQuery

💡 Suspense

"`<Suspense>` lets you display a fallback until its children have finished loading."

"`<Suspense>`를 사용하면 자식이 로딩을 완료할 때 까지 폴백을 표시할 수 있습니다."

 

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

 

📍 fallback

로딩이 완료되지 않은 경우 실제 UI 대신 렌더링할 대체 UI이다. 어떤 React 노드를 사용해도 되지만 주로 로딩 스피너, 혹은 스켈레톤 UI 처럼 가벼운 플레이스홀더 뷰르를 사용한다.

 

즉, Suspense는 `children` 이 중단되면 자동으로 `fallback` 으로 전환되고, 데이터가 준비되면 다시 `children` 으로 전환된다. 

---

💡 useQuery vs useSuspenseQuery

tanstack에서 흔히 사용했던 `useQuery`와의 차이점은 isPeding(isLoading), isError의 사용 유무이다. `useSuspenseQuery`는 Suspense와 ErrorBoundary가 data를 보장해주기 때문이다.  

https://suspensive.org/ko/docs/react-query/useSuspenseQuery

 

 

사용 예시

 return useSuspenseQuery({
    queryKey: queryKey.default.shops,
    queryFn: api.getShops,
  });

사용은 그냥 `useQuery`랑 똑같이 사용하면 된다. 단 추가적으로 손을 봐야 하는 곳이 있다.

 

📍 <Suspense> 컴포넌트 사용

`fallback` UI를 적용할 범위에 `<Suspense>`로 감싸주어야 한다. (`context`, `store` 의 사용법과 유사)

만약 모든 컴포넌트에 공통적인 UI를 적용하고자 한다면 `App.jsx`에 `<Suspense>` 로 감싸주면 된다. 

 

사용 예시

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Suspense fallback={<>loading...</>}>
        <Router />
      </Suspense>
    </QueryClientProvider>
  );

• 실제 컴포넌트들은 `<Router/>` 위치에서 렌더링이 되니 해당 컴포넌트를 `<Suspense> ` 로 감싸준다. 
• 로딩시 출력할 UI를 `fallback`에 넣어준다. 
  • 로딩스피너, 스켈레톤 UI 등을 넣어주면 된다.
• 만약 특정 범위별로 다른 `fallback` 을 보여주고 싶다면, `App.jsx` 가 아닌 다른 범위에 넣어주면 된다.