Tanstack Query 라이브러리

Tanstack Query란

Tanstack Query는 누락된 데이터를 가져오는 라이브러리로 알려져 있지만, 좀 더 기술적인 용어로 말하면 데이터 fetch, 캐싱, 동기화, 서버상태 업데이트 등 을 쉽게 만든다.

대부분의 기존 상태관리 라이브러리는 클라이언트는 적합하지만, 비동기, 서버 상태관리는 적합하지 않다. 왜냐하면 서버 상태는 클라이언트 상태와 다르기 때문이다.

서버 상태의 특징

서버 상태의 특징을 살펴보면,

서버의 상태는 내가 소유하거나 통제할 수 없는 원격으로 지속된다.
데이터를 가져오거나 업데이트하는 비동기 통신이 필수적이다.
서버는 소유권 공유를 암시하고, 다른 사람에 의해 변경될 수 있다.
주의깊게 보지않으면 구식이 될 수 있다.

애플리케이션에서 서버 상태의 특성을 파악하면, 진행 하면서 더 많은 문제를 발견한다. 예를 들면

캐싱... (아마도 프로그래밍에서 가장 어려운 일)
동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거
백그라운드에서 "오래된" 데이터 업데이트
데이터가 "오래된" 시기 알기
최대한 빠르게 데이터 업데이트 반영
페이지 매김 및 지연 로딩 데이터와 같은 성능 최적화
서버 상태의 메모리 및 가비지 수집 관리
구조적 공유를 통해 쿼리 결과 메모

Tanstack Query가 제공하는 기능

대부분은 위와같은 문제들을 해결하는데 어려움을 겪고 있으며, Tanstack Query는 구성이 필요없이 잘 동작하고, Tanstack Query를 사용하면 서버 상태 의 까다로운 과제와 장애물을 극복하고 앱 데이터가 사용자를 제어하기 전에 제어할 수 있다.

기술적인 측면에서 Tanstack Query 는 다음과 같은 기능을 제공한다.

애플리케이션에서 복잡하고 잘못 이해된 여러 줄의 코드를 제거하고 몇 줄의 React Query 로직으로 대체할 수 있도록 도와준다
새로운 서버 상태 데이터 소스 연결에 대한 걱정 없이 애플리케이션을 더욱 유지 관리하기 쉽게 만들고 새로운 기능을 쉽게 구축할 수 있다.
애플리케이션이 그 어느 때보다 더 빠르고 반응성이 뛰어나다는 느낌을 주어 최종 사용자에게 직접적인 영향을 준다.
잠재적으로 대역폭을 절약하고 메모리 성능을 높이는 데 도움이 된다.

Tanstack Query 사용 예시

아래 예에서는 React Query GitHub 프로젝트 자체에 대한 GitHub 통계를 가져오는 데 사용되는 가장 기본적이고 간단한 형태의 React Query를 볼 수 있다.

import React from 'react'
import ReactDOM from 'react-dom/client'
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import axios from 'axios'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

function Example() {
  const { isPending, error, data, isFetching } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      axios.get('https://api.github.com/repos/tannerlinsley/react-query').then((res) => res.data),
  })

  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>{isFetching ? 'Updating...' : ''}</div>
      <ReactQueryDevtools initialIsOpen />
    </div>
  )
}

참고

Tanstack Query 공식문서