프로젝트에 React Query 시작하기 (+ server state)

김민아·2023년 1월 7일

React Query

React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze. 👉 공식

📌 server state / client state

server state

client 단에서 제어 및 소유하지 않는 원격으로 유지되는 데이터이다. 가져오기 및 업데이트를 할 때 비동기 API가 필요하며 다른 사람들과 소유권이 공유되며 타인에 의해 변경될 수 있다. 주의하지 않으면 잠재적으로 오래된 데이터가 될 수 있다.

client state

client에서 소유 및 제어하며 사용자의 인터렉션 및 UX에 따라 상태가 변하며 항상 client 내에서 최신상태로 관리되는 데이터이다.

React Query는 서버 상태를 관리하는 라이브러리라고 소개하고 있다.

📌 라이프 사이클

React Query를 통해 관리하는 쿼리 데이터는 라이프사이클에 따라 fetching, fresh, stale, inactive, delete 상태를 가진다.

fetching - 요청 중인 쿼리
fresh - 만료(stale)되지 않은 쿼리. 컴포넌트가 마운트, 업데이트되어도 데이터를 다시 요청하지 않는다
stale - 만료된 쿼리. 컴포넌트가 마운트, 업데이트되면 데이터를 다시 요청한다.
inactive - 사용하지 않는 쿼리. 일정 시간이 지나면 가비지 컬렉터가 캐시에서 제거한다.
delete - 가비지 컬렉터에 의해 캐시에서 제거된 쿼리

📌 Defaults

useQuery, useInfiniteQuery로 가져온 데이터는 기본 stale 상태(기본값이 즉시로 설정되어 있음)가 된다.
stale 쿼리는 다음 조건을 만족했을 때, 백그라운드 re-fetch 된다.
- 새로운 인스턴스가 마운트되었을 때
- 브라우저 창이 다시 포커스 되었을 때
- 네트워크가 다시 연결되었을 때
- refetch interval 옵션으로 수동 설정되었을 때
inactive 쿼리는 5분 후에 가비지 컬렉터에 의해 제거된다. (메모리에서 해제된다.)
백그라운드에서 3회 이상 실패한 쿼리는 에러 처리가 된다.
retry옵션과 retryDelay옵션으로 대기 횟수와 시간을 설정할 수 있다.

staleTime과 cacheTime

staleTime: 쿼리가 fresh에서 stale 상태로 변하는 시간이다. "즉시"로 설정된 기본값에 의해 stale된 쿼리 역시 캐시에서 가져오지만 어떤 조건들에 의해 refetch가 될 수 있다.
cacheTime: inactive 쿼리가 캐시에서 삭제되는 시간을 의미한다. 기본값은 5분이며 쿼리는 observer가 없는 즉시 inactive로 전환되기 때문에 해당 쿼리를 사용하는 모든 요소의 마운트가 해제된다.

🚀 React Query 시작하기

👉 Quick-start | React Query

npm i react-query
# or
yarn add react-query

ReactQueryDevtools

react-query를 사용하면서 개념을 좀 더 쉽게 이해할 수 있었던 것은 이렇게 멋진 devtool 덕분이다. 별도 설정없이는 develop 환경에만 적용되고, initialIsOpen, position 등 커스터마이징 옵션도 제공한다.

`QueryClientProvider`

QueryClient를 생성하고 QueryClientProvider의 client속성으로 queryClient를 전달한다.

import { QueryClient, QueryClientProvider } from "react-query";

// Create a client
const queryClient = new QueryClient()

root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={lightTheme}>
        <App />
      </ThemeProvider>
    </QueryClientProvider>
  </React.StrictMode>,
);