React Query 사용법

설치 및 초기 설정

npm i react-query
or
yarn add react-query

설치가 완료되면 앱 최상단 컴포넌트에서 React Query를 사용하기 위한 설정을 합니다.

// index.tsx
import ReactDOM from 'react-dom/client'
import App from './App'
import { QueryClient, QueryClientProvider } from 'react-query'

const queryClient = new QueryClient()

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <React.StrictMode>
  	<QueryClientProvider client={queryClient}>
    	<App />
    </QueryClientProvider>
  </React.StrictMode>

---

상태

React Query를 통해 관리하는 쿼리 데이터는 라이프 사이클에 따라 5가지 상태를 가집니다.

1. fetching : 요청 중인 쿼리
2. fresh : 만료되지 않은 쿼리. 컴포넌트가 마운트, 업데이트되어도 데이터 재요청하지 않습니다.
3. stale : 만료된 쿼리. 컴포넌트가 마운트, 업데이트 되면 데이터 재요청합니다.
4. inactive : 사용하지 않는 쿼리. 일정 시간이 지나면 가비지 컬렉터가 캐시에서 제거합니다.
5. delete : 가비지 컬렉터에 의해 제거된 쿼리

---

라이프 사이클

1. A 쿼리 인스턴스가 mount 됩니다.

2. 네트워크에서 데이터 fetch 하고 A라는 query key로 캐싱합니다.

3. 이 데이터는 fresh 상태에서 staleTime(기본값 0) 이후 stale 상태로 변경됩니다.

4. A 쿼리 인스턴스가 unmount 됩니다.

5. 캐시는 cacheTime(기본값 5min) 만큼 유지되다가 가비지 콜렉터가 수집합니다.

6. 만일 cacheTime이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount되면, fetch가 실행되고 fresh한 값을 가져오는 동안 캐시 데이터를 보여줍니다.

   staleTime

• 데이터가 fresh->stale 상태로 변경되는데 걸리는 시간

• fresh 상태일때는 쿼리 인스턴스가 새롭게 mount 되어도 네트워크 fetch가 일어나지 않습니다.

• 데이터가 한번 fetch 되고 나서 staleTime이 지나지 않았다면 unmount 후 mount 되어도 fetch가 일어나지 않습니다.

  cacheTime

• 데이터가 inactive 상태일 때 캐싱된 상태로 남아있는 시간

• 쿼리 인스턴스가 unmount 되면 데이터는 inactive 상태로 변경되며, 캐시는 cacheTime만큼 유지됩니다.

• cacheTime이 지나면 가비지 콜렉터로 수집됩니다.

• cacheTime이 지나기 전에 쿼리 인스턴스가 다시 mount 되면, 데이터를 fetch하는 동안 캐시 데이터를 보여줍니다.

• cacheTime은 staleTime과 관계없이, 무조건 inactive 된 시점을 기준으로 캐시 데이터 삭제를 결정합니다.

---

참고

라이프 사이클
공식 문서
https://merrily-code.tistory.com/76
https://kdinner.tistory.com/113
https://maxkim-j.github.io/posts/react-query-preview
https://velog.io/@jkl1545/React-Query
https://kyounghwan01.github.io/blog/React/react-query/basic/#unique-key-%E1%84%92%E1%85%AA%E1%86%AF%E1%84%8B%E1%85%AD%E1%86%BC
https://blog.rhostem.com/posts/2021-02-01T00:00:00.000Z
https://velog.io/@aeong98/React.js-React-Query
https://darrengwon.tistory.com/1517