[React-Query] 개념

개념

공식문서 : TanStack Query(FKA React Query)는 종종 웹 애플리케이션용 누락된 데이터 가져오기 라이브러리로 설명되지만 좀 더 기술적인 용어로 말하면 웹 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 매우 쉽게 만듭니다.

쉽게 말해.

1.서비 상태 가져오기

2.캐싱

3.동기화 및 업데이트

이 3가지를 편리하게 제공해주는 라이브러리 인 것 같다.

 

🙌 「if(kakao)2021 - 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유」 세줄요약 🤟

1. React Query는 React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다.
2. 복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적으로 API를 사용할 수 있습니다.
3. 더 나아가 React Query에서 제공하는 캐싱, Window Focus Refetching 등 다양한 기능을 활용하여 API 요청과 관련된 번잡한 작업 없이 “핵심 로직”에 집중할 수 있습니다

 

샘플코드

import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'
const queryClient = new QueryClient()
export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}
function Example() {
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://api.github.com/repos/TanStack/query').then((res) =>
        res.json(),
      ),
  })
  if (isPending) return 'Loading...'
  if (error) return 'An error has occurred: ' + error.message
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  )
}

 

1. QueryClientProvider contextAPI를 감싼다.

2. queryClient 생성자를 client props로 넘겨준다.

3. useQuery를 사용하여 data를 호출한다.

 

 

주의점

1. 캐싱(Caching)

캐싱이란 특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 높이는 것을 말한다!

 

반복적인 비동기 데이터를 호출하지 않아 서버에 대한 부하를 줄인다.

 

React-Query에서는 최신의 데이터를 fresh한 데이터, 기존의 데이터를 stale한 데이터라고 말한다!

 

stale로 분류된 쿼리들이 다시 리페치되는 경우가

1.새로운 쿼리가 만들어졌을 때(쿼리 키에 전달되는 state가 변경되어 리렌더링 일어났을 때)
2.윈도우가 다시 포커스되었을 때
3.네트워크가 다시 연결되었을 때
4.리페치 인터벌이 설정되었을 때

 

좋은 캐싱을 제공하기 위해서는 서비스에 따른 적절한 패치가 필요하다.

 

refetchOnWindowFocus, //default: true
refetchOnMount, //default: true
refetchOnReconnect, //default: true
staleTime, //default: 0
cacheTime, //default: 5분 (60 * 5 * 1000)

 

staleTime? cacheTime ?

staleTime

• staleTime은 데이터가 fresh → stale 상태로 변경되는 데 걸리는 시간이다.
• fresh 상태일 때는 Refetch 트리거(위의 3가지 경우)가 발생해도 Refetch가 일어나지 않는다!
• 기본값이 0이므로 따로 설정해주지 않는다면 Refetch 트리거가 발생했을 때 무조건 Refetch가 발생한다!

cacheTime

• cacheTime은 데이터가 inactive한 상태일 때 캐싱된 상태로 남아있는 시간이다.
• 특정 컴포넌트가 unmount(페이지 전환 등으로 화면에서 사라질 때) 되면 사용된 데이터는 inactive상태로 바뀌고, 이때 데이터는 cacheTime만큼 유지된다.
• cacheTime 이후 데이터는 가비지 콜렉터로 수집되어 메모리에서 해제된다.
• 만일 cacheTime이 지나지 않았는데 해당 데이터를 사용하는 컴포넌트가 다시 mount되면, 새로운 데이터를 fetch해오는 동안 캐싱된 데이터를 보여준다.
• 즉, 캐싱된 데이터를 계속 보여주는게 아니라 fetch하는 동안 임시로 보여준다는 것이다!

이외에도 사용자가 특정 이벤트가 발생했을 때 Refetching을 하도록 설정해줄 수 있다. React-Query의 이러한 기능들을 통해 사용자는 언제나 최선의 데이터를 제공받게 된다.

 

https://tanstack.com/query/latest/docs/framework/react/overview

TanStack Query Docs

https://mycodings.fly.dev/blog/2023-09-17-how-to-use-react-query-and-usequery

React Query 강좌 1편. useQuery 사용법 기초