공식 문서 : https://tanstack.com/query/v4/docs/overview

Overview

React Query는 종종 React에 대한 누락된 data-fetching 라이브러리로 묘사되지만, 좀 더 기술적인 용어로, React application에서 서버 state를 fetching, caching, synchronizing, updating하는 작업을 쉽게 만들어 준다.

Motivation

기본적으로 React application에서는 component에서 데이터를 가져오거나 업데이트하는 독창적인 방법이 제공되지 않으므로, 개발자들이 데이터를 가져오는 고유의 방법을 만들게 된다. 이는 일반적으로 React hook를 사용하여 component기반 state와 effect를 결합하거나, 범용적인 상태관리 라이브러리를 이용하여 앱 전체에 비동기 데이터를 저장하고 제공하는것을 의미한다.

대부분의 기존 상태관리 라이브러리들은 client state 작업에 적합하지만, 비동기나 server state 작업에는 적합하지 않다. 이는 server state가 완전히 다르기 때문이다. 우선 server state는 :

• 내가 제어하거나 소유할 수 없는 위치에서 원격으로 유지된다.
• fetch, update를 위한 비동기 API가 필요하다.
• 소유권이 공유되며 다른사람이 내가 모르게 변경가능하다.
• 주의하지 않으면 "out of date(오래된)" 될 수 있다.

application에서 server state의 특성을 파악하면 더 많은 문제가 발생한다. 예를들어 :

• 캐싱...(아마 프로그래밍에서 가장 어려운 일)
• 동일 데이터에 대한 여러 request를 단일 request로 중복 제거
• 백그라운드에서 out of date 데이터 업데이트
• 데이터가 out of date임을 파악
• 가능한 빨리 data update 반영
• pagination, lazy loading과 같은 성능 최적화
• server state의 메모리와 garbage collection 관리
• structual sharing을 통한 query result 메모

위 list에 압도되지 않았다면, 당신이 server state 문제를 이미 모두 해결했으며 상을 받을 자격이 있다는것을 의미할것이다. 하지만, 당신이 대부분의 사람과 같다면 아직 이 모든, 또는 대부분의 문제를 다루지 않았고 단지 겉만 긁고있을 뿐이다!

React Query는 server state를 관리하기 위한 최고의 라이브러리 중 하나이다. zero-config로 놀라울 정도로 즉시 사용가능하며 잘 작동하고, application이 성장함에 따라 원하는대로 커스터마이징 할 수 있다.

React Query를 사용하면 server state의 까다로운 문제와 장애물들을 극복하고, app data가 당신을 컨트롤하기 이전에 당신이 app data를 제어할 수 있을 것이다.

좀 더 기술적인 부분에서, React Query는 다음과 같은 일들을 할 것이다 :

• application에서 복잡하고 오해의 소지가 있는 코드 여러 줄을 제거하고 몇줄의 React Query 로직으로 대체할 수 있다.
• 새로운 server data source를 연결할 걱정 없이 application의 유지보수성을 높이고 새로운 기능 구축을 용이하게 한다.
• 당신의 application을 그 어느때보다 빠르고 반응성 좋게 만들어 end user에게 직접적인 영향을 미친다.
• 잠재적으로 대역폭을 절약하고 메모리 성능을 향상시킨다.

Enough talk, show me some code already!

아래 예제에서는 React Query project 자체의 Github 통계를 가져오는 가장 기본적이고 간단한 React Query 형태를 확인할 수 있다.

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

---

Installation

React Query는 npm을 통해 설치할 수 있다. (기타 설치 방법은 공식 문서 참조)

$ npm i @tanstack/react-query
# or
$ yarn add @tanstack/react-query

React Query는 React v16.8+와 호환되며 ReactDOM 및 React Native와 함께 작동한다.

---

Quick Start

이 예제는 React Query의 핵심 3가지 개념을 매우 간략하게 보여준다.

• Queries
• Mutations
• Query Invalidation

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'
import { getTodos, postTodo } from '../my-api'

// Create a client
const queryClient = new QueryClient()

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

function Todos() {
  // Access the client
  const queryClient = useQueryClient()

  // Queries
  const query = useQuery(['todos'], getTodos)

  // Mutations
  const mutation = useMutation(postTodo, {
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries(['todos'])
    },
  })

  return (
    <div>
      <ul>
        {query.data.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>

      <button
        onClick={() => {
          mutation.mutate({
            id: Date.now(),
            title: 'Do Laundry',
          })
        }}
      >
        Add Todo
      </button>
    </div>
  )
}

render(<App />, document.getElementById('root'))