React Query란?

데이터 Fetching, caching, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 React 라이브러리로 쉽게 말하면 Server State를 관리하는 라이브러리입니다.

예를 들어, 관리자 화면에서 동시에 두 명의 관리자가 같은 페이지를 바라보고 있는 상황에서 한 관리자가 유저의 데이터를 변경하면, 다른 관리자도 그 유저의 변경된 데이터를 바라볼 수 있어야 합니다. 이러한 유저의 데이터는 클라이언트 쪽보다는 서버 쪽에 좀 더 적합하다고 볼 수 있습니다.

React Query를 사용하는 이유

기존에 존재하는 Redux, Mobx, Recoil과 같은 라이브러리는 클라이언트쪽의 데이터들을 관리하기는 용이해도 서버 쪽의 데이터들을 관리하기에는 적합하지 않다.

React Query의 장점

1. 캐시 기능: React Query는 요청한 데이터를 캐시하여 다시 요청할 필요가 없게 합니다. 캐시 관리 옵션도 제공하여 원하는 대로 캐시 관리를 할 수 있습니다.

2. 자동 새로 고침: React Query는 요청한 데이터가 변경될 때 자동으로 새로 고침합니다. 새로 고침 옵션도 제공하여 원하는 대로 새로 고침을 관리할 수 있습니다.

3. 쉬운 사용: React Query는 간단한 API와 훅 기반 구조를 가지고 있어 데이터 요청, 캐시 관리, 새로 고침 등을 간단하게 관리할 수 있습니다.

4. 결과 상태 관리: React Query는 데이터 요청 상태 (로딩, 성공, 오류)를 관리하여 결과 상태에 따른 UI 렌더링을 간단하게 관리할 수 있습니다.

example

useQuery

import { useQuery } from 'react-query'

function fetchData(key) {
  return fetch(`https://my-api.com/data/${key}`)
    .then(res => res.json())
}

function MyComponent() {
  const { data, status } = useQuery('data', fetchData)

  return (
    <div>
      {status === 'loading' && <div>Loading...</div>}
      {status === 'error' && <div>Error: {error.message}</div>}
      {status === 'success' && <div>Data: {data}</div>}
    </div>
  )
}

useMutation

useMutation은 데이터를 수정하는 API 요청을 정의하고, 데이터 수정에 대한 상태를 관리할 수 있습니다.

import { useMutation } from 'react-query';

const addTodo = (text) => fetch('/api/todos', {
  method: 'POST',
  body: JSON.stringify({ text }),
});

const [createTodo, { status, error, data }] = useMutation(addTodo, {
  onSuccess: (data) => {
    console.log(`Todo added: ${data.text}`);
  },
});