TanStack Query

데이터 fetching, caching, synchronizing, updating server state 에 사용

별도의 config파일을 작성할 필요가 없으며 쉽게 커스터마이징이 가능

탄생배경

기존에는 컴포넌트 기반 스테이트(component-based state), 리액트 훅, Redux와 같은 상태관리 라이브러리 등을 사용하여 비동기 데이터를 처리해 왔음

이는 client state를 처리하는 데는 효과적이나 server state를 처리하는데는 효과적이지 못하였음

* server state 의 특징

사용자가 제어하거나 소유하지 않는 위치에서 원격으로 유지됨

비동기 API를 통해 fetching과 updating이 필요

복수의 사람들이 접근이 가능하며 사용자가 모르는 사이 변경 될 수 있음

그렇기 때문에 언제든 데이터가 out of date가 될 수 있음

* server state 관리의 어려움

캐싱

동일 데이터 요청에 대한 중복 요청 제거

백그라운드에서 out of date 데이터 업데이트

데이터가 out of date된 것을 파악하는 것

가능한 한 신속하게 데이터 업데이트 반영

페이지네이션과 Lazy Loading과 같은 성능 최적화

메모리와 server state의 가비지 컬렉션 관리

구조 공유(structural sharing)를 사용하여 쿼리 결과를 Memoizing

간단한 예시

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 { isLoading, error, data } = useQuery(['repoData'], () =>
    fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
      res.json()
    )
  )

  if (isLoading) 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>
  )
}

[TanStack Query] 설치 및 셋팅

참고

설치

TanStack Query

리액트 v16.8+ 부터 호환

$ npm i @tanstack/react-query
# or
$ yarn add @tanstack/react-query

Devtools

선택

$ npm i @tanstack/react-query-devtools
# or
$ yarn add @tanstack/react-query-devtools

woogiereal-blog

Other articles

[TanStack Query] 설치 및 셋팅

참고

설치

TanStack Query

Devtools

셋팅

_app.tsx 설정 …

Other articles

참고

설치

TanStack Query

Devtools

셋팅

_app.tsx 설정 …

links

social