Today 요약

1. 리액트 쿼리 강의

1. What I Learned?

리액트 쿼리 강의

useIsFetching

App 컴포넌트에서 한 번에 Loading 컴포넌트를 불러오고 이를 useIsFetching으로 처리한다.

import { Spinner, Text } from '@chakra-ui/react'
import { useIsFetching } from '@tanstack/react-query'

export function Loading() {
  const isFetching = useIsFetching()
  const display = isFetching ? 'inherit' : 'none'

  return (
    <Spinner
      thickness="4px"
      speed="0.65s"
      emptyColor="olive.200"
      color="olive.800"
      role="status"
      position="fixed"
      zIndex="9999"
      top="50%"
      left="50%"
      transform="translate(-50%, -50%)"
      display={display}
    >
      <Text display="none">Loading...</Text>
    </Spinner>
  )
}

강의에서 나왔던 새로운 훅이라 정리해보지만, 어떤 이점이 있는지는 아직 모르겠다. 중앙에서 한 번에 로딩을 보여준다면, 내가 원하는 부분에서만 로딩을 보여주기는 힘들 것이고, 미리 먼저 사용자한테 레이아웃을 보여줄 수 있는 부분도 못 보여주지 않을까 하는 우려가 있다.

리액트 쿼리에서 데이터를 미리 표시하는 방법에 대해..

서버로 부터 리액트 쿼리를 통해 데이터를 받아올 때 받아오는 동안 로딩을 보여주더라도 예측할 수 있는 데이터는 미리 받아온다든지 클라이언트 자체에서 기본값으로 설정해 놓은 데이터를 보여주는 등과 관련해서 리액트 쿼리는 여러가지 방법을 사용할 수 있다.

• prefetchQuery의 경우, 미리 요청해서 데이터를 캐시에 등록해놓고, 사용자가 좀 더 빠르게 데이터를 볼 수 있도록 해준다. 예를 들어, 홈페이지에서 미리 데이터를 받아놓고 원하는 페이지에 접속할 때 조금 더 빠르게 데이터를 볼 수 있게 하거나 달력 페이지가 있을 때 다음 달력 페이지를 미리 prefetch 해놓을 수 있다.
• setQueryData의 경우, mutation을 사용할 때 주로 사용하며, 서버와 동기화되지는 않지만, 미리 client의 데이터를 반영해서 쿼리 캐시에 반영해서 업데이트 할 때 사용한다. 이는 사용자 경험을 유리하게 만들기 위해 사용하는 것이 좋기 때문에 optimistic UI를 구현하는 데 유리하다.
• placeholderData의 경우, 임의로 데이터를 표시해놓을 수 있다. 하지만 이는 따로 캐시에 등록되지는 않는다.
• initialData의 경우, 초기에 데이터를 보여주는 용도로 사용하며, 쿼리가 refetch 되기 전까지 보여주는 데이터를 의미한다. placeholderData와 다른 점이라면, 초기 데이터를 캐시에 잠시 보관하는 점이 다르다.