[React] React Query 톺아보기

React Query는 React app에서 데이터를 캐싱하고, 지속적으로 동기화하고 업데이트하여 서버 상태 관리를 도와주는 라이브러리이다.

crypto tracker 를 개발하며 React Query로 서버 상태를 관리하였고, 이 라이브러리가 내부적으로 데이터를 어떻게 캐싱하는지 궁금했다.

Query

Queries

React Query에서는 Query를 Query key로 연결된, 비동기 통신을 통해 불러온 데이터에 선언적 종속성 이라고 말한다.

useQuery

GET 요청과 같이 서버의 데이터를 불러올 때 사용하는 Hook이다.

// 가장 기본적인 형태의 React Query useQuery Hook 사용 예시
const result = useQuery(
  queryKey, // 이 Query 요청에 대한 응답 데이터를 캐시할 때 사용할 Unique Key (required)
  fetchFn, // 이 Query 요청을 수행하기 위한 Promise를 Return 하는 함수 (required)
  options, // useQuery에서 사용되는 Option 객체 (optional)
);

query key를 통해 서버 상태를 로컬에 캐시하고 관리하기 때문에 required한 요소이며 배열 형태로 지정해준다.

result는 isLoading, isError, isSuccess의 상태 중 하나가 된다.

isError 상태라면 error 속성을 통해 에러를 감지할 수 있고, isSuccess 상태라면 data 속성을 통해 데이터를 보여줄 수 있다.

// useQuery의 속성을 사용해 view를 구성하는 기본예시 코드
function Todos() {
  const { isLoading, isError, data, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  })

  if (isLoading) {
    return <span>Loading...</span>
  }

  if (isError) {
    return <span>Error: {error.message}</span>
  }

  // We can assume by this point that `isSuccess === true`
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )

useMutaion

POST/UPDATE/DELETE 요청과 같이 서버에 Side Effect를 발생시켜 서버의 상태를 변경시킬 때 사용하는 Hook이다.

// 가장 기본적인 형태의 React Query useMutation Hook 사용 예시
const { mutate } = useMutation(
  mutationFn, // 이 Mutation 요청을 수행하기 위한 Promise를 Return 하는 함수 (required)
  options, // useMutation에서 사용되는 Option 객체 (optional)
);

---

Stale

useQuery는 기본적으로 캐시된 데이터를 stale한 상태로 여기는데, stale한 상태는 사전적으로 '탁한', '신선하지 않은'이라는 의미며, 여기서는 오래된, 변화가 필요한 상태의 의미로 쓰인다.

stale queries는 다음의 경우에 refetching을 실행하게 된다.

• 새로운 쿼리 인스턴스가 마운트될 때
• 브라우저 창이 다시 포커스될 때
• 네트워크가 재연결되었을 때
• 선택적으로 설정한 refetch interval이 있다면 해당 쿼리에 대해서 실행

기본적으로 inactive(비활성화)된 쿼리는 5분 이후 가비지 컬렉션이 수행되어 캐싱에서 사라지지만, cacheTime 옵션을 수정하여 이 시간을 조정할 수 있다.