TanStack Query 란

참고

React Query ?

  • React Query v4부터 TanStack Query로 라이브러리 명이 변경되었다.
  • 앞으로 Solid Query, Vue Query, Svelte Query가 추가로 제공될 예정

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>
  )
}

links

social