본문으로 건너뛰기

개요

TanStack Query(이전 명칭: React Query)는 흔히 웹 애플리케이션에 없던 데이터 가져오기 라이브러리로 설명되지만, 좀 더 기술적으로 말하면 웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 매우 간편하게 해 줍니다.

도입 배경​

대부분의 핵심 웹 프레임워크에는 데이터를 전체적으로 가져오거나 업데이트하는 방식에 대해 정해진 접근법이 제공되지 않습니다. 이 때문에 개발자는 데이터 가져오기에 관한 엄격한 방침을 캡슐화한 메타 프레임워크를 만들거나, 자체적인 데이터 가져오기 방식을 고안하게 됩니다. 이는 일반적으로 컴포넌트 기반 상태와 부수 효과를 임시로 조합하거나, 더 범용적인 상태 관리 라이브러리를 사용해 앱 전반에서 비동기 데이터를 저장하고 제공하는 것을 의미합니다.

대부분의 전통적인 상태 관리 라이브러리는 클라이언트 상태를 다루는 데 매우 뛰어나지만, 비동기 또는 서버 상태를 다루는 데는 그다지 뛰어나지 않습니다. 이는 서버 상태가 완전히 다르기 때문입니다. 우선 서버 상태는 다음과 같습니다:

  • 제어하거나 소유하지 못할 수 있는 원격 위치에 영구 저장됩니다
  • 가져오기 및 업데이트를 위해 비동기 API가 필요합니다
  • 공동 소유권을 의미하며 본인 모르게 다른 사람이 변경할 수 있습니다
  • 주의하지 않으면 애플리케이션에서 잠재적으로 "최신 상태가 아니게" 될 수 있습니다

애플리케이션에서 서버 상태의 특성을 이해하고 나면 진행하면서 훨씬 더 많은 과제가 발생합니다. 예를 들면 다음과 같습니다:

  • 캐싱... (프로그래밍에서 아마도 가장 어려운 작업)
  • 동일한 데이터에 대한 여러 요청을 하나의 요청으로 중복 제거하기
  • 백그라운드에서 "오래된" 데이터 업데이트하기
  • 데이터가 "최신 상태가 아닌" 시점 파악하기
  • 데이터 업데이트를 최대한 빠르게 반영합니다
  • 페이지네이션 및 데이터 지연 로딩과 같은 성능 최적화
  • 서버 상태의 메모리 및 가비지 컬렉션 관리
  • 구조적 공유를 사용하여 쿼리 결과 메모이제이션하기

이 목록에 압도되지 않았다면 이미 모든 서버 상태 문제를 해결했으며 상을 받을 자격이 있다는 뜻일 것입니다. 하지만 대다수의 사람과 같다면 이러한 과제의 전부 또는 대부분을 아직 해결하지 못했으며, 지금은 그저 표면만 살펴보고 있을 뿐입니다!

TanStack Query는 단연 서버 상태를 관리하기 위한 최고의 라이브러리 중 하나입니다. 별도 설정 없이 즉시 매우 훌륭하게 작동하며, 애플리케이션이 성장함에 따라 원하는 대로 사용자 지정할 수 있습니다.

TanStack Query를 사용하면 까다로운 _서버 상태_의 과제와 장애물을 극복하고, 앱 데이터가 사용자를 통제하기 전에 이를 제어할 수 있습니다.

좀 더 기술적인 관점에서 TanStack Query는 다음과 같이 작동할 가능성이 큽니다:

  • 애플리케이션에서 복잡하고 잘못 이해된 코드 많은 줄을 제거하고 단 몇 줄의 TanStack Query 로직으로 대체할 수 있도록 지원합니다
  • 새로운 서버 상태 데이터 소스를 연결할 걱정 없이 애플리케이션의 유지보수성을 높이고 새로운 기능을 더 쉽게 구축할 수 있게 합니다
  • 애플리케이션이 이전보다 더 빠르고 반응성이 뛰어나다고 느끼게 하여 최종 사용자에게 직접적인 영향을 미칩니다
  • 대역폭을 절약하고 메모리 성능을 높이는 데 도움이 될 수 있습니다

설명은 충분하니, 이제 코드를 보여주세요!​

아래 예제에서는 TanStack Query GitHub 프로젝트 자체의 GitHub 통계를 가져오는 데 사용되는 가장 기본적이고 단순한 형태의 TanStack Query를 확인할 수 있습니다:

StackBlitz에서 열기

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

설득됐습니다. 이제 무엇을 해야 하나요?​