[React] Suspense

🎈 Suspense 란?

로딩 중에는 로딩 화면을 보여주고, 로딩이 완료되면 해당 컴포넌트를 보여주는 기능

데이터 Fetching 중 스켈레톤이나 스피너 같은 컴포넌트를 보여주고싶을 때 사용한다.

🔰 쓰는 이유

{isFetching ? <Spinner /> : <Component />}

이렇게 쓰면 복잡하니까 + 여러 lazy 컴포넌트의 로딩을 묶어서 처리할 수 있다.

🎈 사용하기

자식 컴포넌트가 로딩이 끝날 때까지 Fallback Component를 보여주는 역할을 한다.
상위 Suspense는 하위 Suspense를 만나기 전까지 그 사이에 있는 컴포넌트들의 로딩을 처리한다.

const Parent = () => {
  return (
    <Suspense fallback={<p>loading A</p>}>
      
      <A1 />
      <A2 />
      
      <Suspense fallback={<p>loading B</p>}>
        <B1 />
        <B2 />
      </Suspense>
      
    </Suspense>
  )
}

A1, A2 중 하나라도 로딩중이면 loading A 가 표시되고
B1, B2 중 하나라도 로딩중이면 loading B 가 표시된다.
A 모두 로딩이 끝났고 B가 로딩중이면, A 컴포넌트와 loading B가 함께 표시된다.

이렇게 컴포넌트별로 로딩을 다르게 설정할 수 있다.

🎈 React Query 에서 Suspense 사용

const Child = () => {
  const query = useQuery(
    querykey, 
    queryFn, 
    { suspense: true }
  )
  ...
}
  
const Parent = () => {
  return (
    <Suspense>
      <Child />
    </Suspense>
  )
}

useQuery의 suspense 옵션을 true 로 설정한다.

useQuery를 사용한 컴포넌트의 부모 컴포넌트에서 <Suspense> 태그로 감싸줘야 작동이 되는것 같다.

useQuery가 쓰일마다 전역으로 suspense 옵션을 주려면 queryClient 에서 defaultOptions 을 설정한다.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
    },
  },
})

🎈 참고

사용자 경험 개선 1편 - react suspense
Suspense을 사용해 선언적으로 로딩 화면 구현하기
React suspense