Tanstack-Query(React-Query)

geun·2024년 4월 5일

React

목록 보기

8/14

Tanstack Query (React- Query)

이름 변경

작년 9월에 React Query에서 Tanstack Query로 이름이 바뀜 (상표권 문제 등의 이유 + React 뿐만 아니라 다른 프레임워크의 확장 가능성 때문에 팀명을 따라 변경)

Tanstack Query란?

웹 애플리케이션에서 비동기적으로 state를 적용하기 위해 사용하는 툴
서버 상태 가져오기, 캐싱, 동기화, 업데이트에 도움을 준다.
전역 상태 관리와는 다른 개념이다. (Recoil, Jotai, Redux 등) 클라이언트 앱의 상태를 관리하고, 여러 컴포넌트 간에 상태를 공유하기 위한 라이브러리
persist와 같은 라이브러리로 보완을 할 수는 있지만, Tanstack쿼리는 데이터 요청 및 캐싱을 관리하는 라이브러리다.
API 호출, 데이터 캐싱, 상태 관리 작업을 담당할 수 있다.

장점

캐싱을 통한 앱의 속도 향상
동일한 데이터에 대한 중복 요청 제거
오래된 데이터의 상태를 파악해서 Update를 지원
가비지 컬렉팅 제공
React hooks와 유사한 문법 인터페이스 (useQuery, useMutation)

기본 설치, Setting

npm i @tanstack/react-query

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

const queryClient = new QueryClient()

function App() {
  return (
// Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

app 혹은 main에 QueryClientProvider추가

기본 사용 문법

Quick Start | TanStack Query Docs

useQuery (GET) 쿼리 키(queryKey), 함수(queryFn)를 가져오는 쿼리를 만들어서, 상태, 데이터 등을 가져올 수 있다.
useMutation(POST DELETE PATCH UPDATE) 쿼리 키(queryKey), 함수(queryFn)를 가져오는 쿼리를 만들어서, 상태, 데이터 등 생성, 업데이트 삭제 할 수 있다.
useQueryClient queryClinet에 접근하여 데이터를 가져오는 방식이다.
queryKey와 queryFn은 필수고 그 외 options은 선택적으로 들어간다.
- gcTime : 카비지콜렉션 주기
- enabled : 쿼리가 활성화 되어있는지 여부
- networkMode : 쿼리를 가져오는 방법 설정
- initialData : 초기 데이터로, 쿼리가 처음 만들어질 때 사용
- initialDataUpdatedAt : 초기 데이터가 언제 업데이트 되었는지를 나타냄
- meta : 쿼리에 대한 메타데이터
- notifyOnChangeProps : 데이터가 업데이트될대만 리렌더링 되게 설정할때 사용한다.
- placeholderData : 로딩중에 보여줄 데이터(스켈레톤 데이터)
- refetchInterval : 자동으로 쿼리를 다시 실행할 시간 간격 setTimeout대신 사용
- refetchOnMount : 마운트가될 때마다 자동으로 쿼리를 다시 실행할지 여부
- refetchOnReconnect : 연결이 재연결될때마다 자동으로 쿼리를 실행할지 여부
- refetchOnWindowFocus : 탭 변경이 될 때 자동으로 쿼리 실행할지 여부
- retry : 실패한 요청을 다시 시도할 횟수
  
  등등