🔥 개요

523자
7분

강의 목차

TanStack Query(이전 이름: React Query)는 웹 애플리케이션에 없어서는 안 될 데이터 가져오기 라이브러리로 자주 언급됩니다. 기술적으로 말하자면, 이 라이브러리는 웹 애플리케이션에서 서버 상태를 가져오고, 캐시하고, 동기화하고, 갱신하는 작업을 매우 쉽게 만들어 줍니다.

동기

대부분의 핵심 웹 프레임워크에는 데이터를 종합적으로 가져오거나 갱신하는 방법에 대한 강력한 의견이 없습니다. 이로 인해 개발자들은 데이터 가져오기에 대한 엄격한 의견을 포함하는 메타 프레임워크를 만들거나, 자체적인 데이터 가져오기 방법을 고안하게 됩니다. 이는 주로 컴포넌트 기반 상태와 부수 효과를 조합하거나, 더 일반적인 목적의 상태 관리 라이브러리를 사용하여 애플리케이션 전체에 비동기 데이터를 저장하고 제공하는 방식으로 이루어집니다.

대부분의 전통적인 상태 관리 라이브러리는 클라이언트 상태 작업에 탁월하지만, 비동기 또는 서버 상태 작업에는 그다지 좋지 않습니다. 이는 서버 상태가 완전히 다르기 때문입니다. 서버 상태의 특징을 살펴보면:

  • 여러분이 제어하거나 소유하지 않을 수 있는 원격 위치에 저장됩니다.
  • 가져오기와 갱신을 위해 비동기 API가 필요합니다.
  • 공유 소유권을 의미하며 여러분도 모르는 사이에 다른 사람이 변경할 수 있습니다.
  • 주의하지 않으면 애플리케이션에서 "오래된" 상태가 될 가능성이 있습니다.

애플리케이션의 서버 상태 본질을 이해하고 나면, 더 많은 과제가 나타납니다. 예를 들어:

  • 캐싱 (프로그래밍에서 가장 어려운 작업 중 하나일 수 있습니다)
  • 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거하기
  • 백그라운드에서 "오래된" 데이터 갱신하기
  • 데이터가 "오래되었는지" 파악하기
  • 데이터 갱신을 최대한 빠르게 반영하기
  • 페이지네이션과 데이터 지연 로딩 같은 성능 최적화
  • 서버 상태의 메모리 관리와 가비지 컬렉션
  • 구조적 공유를 통한 쿼리 결과 메모이제이션

이 목록에 압도되지 않았다면, 여러분은 이미 모든 서버 상태 문제를 해결했고 상을 받을 자격이 있다는 뜻일 것입니다. 하지만 대다수의 사람들처럼 이런 과제들의 전부 또는 대부분을 아직 해결하지 못했다면, 이는 우리가 겨우 표면만 긁은 것에 불과합니다!

React Query는 서버 상태 관리를 위한 최고의 라이브러리 중 하나입니다. 설정 없이도 즉시 놀랍게 잘 작동하며, 애플리케이션이 성장함에 따라 여러분의 취향에 맞게 커스터마이징할 수 있습니다.

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

좀 더 기술적인 측면에서 React Query는 다음과 같은 이점을 제공할 것입니다:

  • 애플리케이션에서 복잡하고 오해의 소지가 있는 많은 코드 줄을 제거하고, 단 몇 줄의 React Query 로직으로 대체할 수 있습니다.
  • 새로운 서버 상태 데이터 소스를 연결하는 걱정 없이 새로운 기능을 더 쉽게 구축하고 애플리케이션을 더 유지보수하기 쉽게 만듭니다.
  • 애플리케이션을 그 어느 때보다 빠르고 반응성 있게 만들어 최종 사용자에게 직접적인 영향을 미칩니다.
  • 대역폭을 절약하고 메모리 성능을 향상시키는 데 잠재적으로 도움을 줄 수 있습니다.

말은 그만하고, 코드를 보여주세요!

아래 예제에서는 React Query를 가장 기본적이고 단순한 형태로 사용하여 React Query GitHub 프로젝트 자체의 GitHub 통계를 가져오는 것을 볼 수 있습니다:

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

관심이 생겼다면, 이제 어떻게 해야 할까요?

  • 공식 React Query 과정을 수강해 보는 것을 고려해 보세요 (또는 팀 전체를 위해 구매해 보세요!)
  • 놀랍도록 철저한 단계별 가이드와 API 참조를 통해 자신의 속도에 맞춰 React Query를 배워보세요.