Docs
GETTING STARTED
Overview

Overview

TanStack Query(이전 명칭 React Query)는 웹 어플리케이션을 위한 데이터 페칭 라이브러리입니다.
더 기술적으로 표현하자면, 웹 어플리케이션에서 서버 state를 손쉽게 페칭하고 캐싱해주며, 이를 동기적으로 업데이트할 수 있게 해줍니다.

Motivation

대부분의 웹 프레임워크는 데이터를 전체적으로 조회 및 관리하는 것에 대해 명확한 방법을 제공하지 않습니다.
그래서 개발자들은 데이터 페칭 프레임워크를 만들거나, 자신만의 페칭 방식을 고안하게 됩니다.
보통 컴포넌트state와 side-effects를 함께 쓰거나, 비동기 데이터를 어플리케이션 전반에 저장하고
제공하기 위해 상태 관리 라이브러리를 사용하기도 합니다.

대부분의 상태 관리 라이브러리는 클라이언트에서의 상태를 다루는 데에는 뛰어나지만,
비동기 또는 서버 state를 다루는 데에는 효과적이지 않습니다.
서버 state가 클라이언트 state와 완전히 다르기 때문입니다.
서버 state는 다음과 같은 특징을 가집니다:

  • 유저가 제어 및 접근 불가능한 위치(서버)에 데이터가 저장됩니다.
  • 페칭이나 업데이트를 할 경우 비동기 API를 사용해야 합니다.
  • 한 서버를 여러 사람이 함께 사용할 수 있고, 다른 사용자가 모르는 사이 데이터가 변경될 수 있습니다.
  • 잘못 설계할 경우 어플리케이션 내 데이터를 항상 최신 상태로 유지하지 못할 수 있습니다.

서버 state의 특성을 이해하고 나면, 다음과 같은 더 많은 공부해볼 것들이 생길 것입니다:

  • caching... (프로그래밍에서 가장 어려운 일 중 하나)
  • 동일한 데이터를 반환하는 중복 요청 제거
  • 백그라운드에서 가져온지 오래된 데이터 업데이트
  • 데이터가 가져온지 오래된 시점을 파악
  • 업데이트된 데이터를 빠르게 반영
  • pagination과 lazy loading과 같은 성능 최적화
  • 서버 상태의 메모리 관리 및 가비지 컬렉션
  • 구조적 공유를 통한 쿼리 결과 데이터 메모이제이션

이 개념들이 익숙하다면, 서버 state 관련 문제를 모두 해결할 수 있을 겁니다.
하지만 대부분의 사람들은 이 모든 도전 과제를 해결하지 못했거나 다루지 않았을 것입니다.
우리는 이제 겨우 겉핥기만 하고 있는 셈인거죠!

React Query는 서버 state를 관리하는 데 최고의 라이브러리 중 하나입니다.
별다른 설정 없이 바로 잘 작동하며, 어플리케이션 규모에 따라 설정을 커스터마이징할 수 있습니다.

React Query를 사용하면 서버 state의 까다로운 문제들을 극복하고,
어플리케이션 데이터에 끌려다니지 않고 현명하게 데이터를 관리할 수 있습니다.

기술적인 면에서, React Query에게 기대할 수 있는 것들은:

  • 복잡하고 이해하기 어려운 많은 양의 코드를 React Query 코드 몇 줄로 대체할 수 있습니다.
  • 어플리케이션의 유지보수를 용이하게 하고, 새로운 서버 state 관련 기능을 쉽게 추가할 수 있습니다.
  • 어플리케이션이 더욱 빠르고 반응성이 좋게 느껴지도록 하여 사용자에게 직접적인 영향을 미칩니다.
  • 대역폭을 절약하고 메모리 성능을 향상시킬 수 있습니다.

Enough talk, show me some code already!

아래는 가장 기본적이고 간단한 형태로 React Query를 사용한 예제입니다. React Query 리포지토리의 깃허브 통계를 가져오는 코드입니다:

StackBlitz에서 열기 (opens in a new tab)

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 "로딩중...";
 
  if (error) return "에러가 발생했습니다: " + 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>
  );
}

You talked me into it, so what now?

  • 공식 React Query 강의를 개인 또는 팀 단위로 구매하여 수강해보세요. React Query의 모든 기능을 체계적으로 배우는 데 도움이 될 것입니다.
  • Walkthrough Guide와 API Reference를 참고하여 자신의 속도에 맞춰 학습하세요. 이 가이드는 React Query의 사용법을 자세히 설명하고 있어, 실습을 통해 이해도를 높이는 데 유용합니다.

Changed History

2024.08.24. @ubinquitous

  • [용어] 애플리케이션 → 어플리케이션
  • [용어] 상태 → state
  • [용어] 부수 효과 → side-effects
  • [구문] 서버 상태를 손쉽게 fetching, caching, 동기화 및 업데이트할 수 있게 해줍니다. → 서버 state를 손쉽게 페칭하고 캐싱해주며, 이를 동기적으로 업데이트할 수 있게 해줍니다.
  • [구문] 서버 상태의 까다로운 문제들을 극복하고, 애플리케이션 데이터가 당신을 관리하기 전에 당신이 데이터를 관리할 수 있습니다. → 서버 state의 까다로운 문제들을 극복하고,
    어플리케이션 데이터에 끌려다니지 않고 현명하게 데이터를 관리할 수 있습니다.
  • [구문] 아래 예제에서는 React Query가 가장 기본적이고 간단한 형태로 사용됩니다. → 아래는 가장 기본적이고 간단한 형태로 React Query를 사용한 예제입니다.
Installation