Tanstack Query에 대해 깊게 알아보기

Tanstack Query 깊게 이해하기

React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리이다.

일단 대표적인 두개의 hook이 있다. useQuery와 useMutation

useQuery는 HTTP METHOD GET 요청과 같이 서버에 저장되어 있는 “상태”를 불러와 사용할 때 사용하고 useMutation은 HTTP METHOD POST, PUT, DELETE 요청과 같이 서버에 Side Effect를 발생시켜 서버의 상태를 변경시킬 때 사용한다.

queryKey

우선 이 쿼리 키의 역할은 전 글에서 작성했던 것과 같이

쿼리를 식별하는 키. 이 키를 기반으로 캐싱 및 리페치(재요청)를 관리 하는 역할을 한다.

하지만 무슨 말인지 제대로 몰라서 더 찾아봤다.

일단 코드로 먼저 보여주면 다음과 같다.

import { useQuery } from 'react-query';
import axios from 'axios';

function TodoList() {
  const { isLoading, error, data } = useQuery(
    'todo', // Key로 데이터를 캐싱
    () => axios.get('/todos').then((res) => res.data) // Todo 목록 가져오기
  );

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>에러 발생: {error.message}</div>;

  return (
    <div>
      <h1>할 일 목록</h1>
      <ul>
        {data.map(({ id, title, completed }) => (
          <li key={id}>
            {title} - {completed ? '완료' : '진행 중'}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

import { useQuery } from 'react-query';

function TodoStats() {
  const { isLoading, error, data } = useQuery(
    'todo', // 동일한 Key로 데이터를 공유
    () => axios.get('/todos').then((res) => res.data) // 실제로는 캐시된 데이터를 사용
  );

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>에러 발생: {error.message}</div>;

  const completedCount = data.filter((todo) => todo.completed).length;
  const totalCount = data.length;

  return (
    <div>
      <h1>Todo 통계</h1>
      <p>총 Todo: {totalCount}</p>
      <p>완료된 Todo: {completedCount}</p>
      <p>진행 중 Todo: {totalCount - completedCount}</p>
    </div>
  );
}

export default TodoStats;

import React from 'react';
import TodoList from './TodoList';
import TodoStats from './TodoStats';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <TodoList />
      <TodoStats />
    </QueryClientProvider>
  );
}

export default App;

동작 시나리오

1. TodoList 컴포넌트가 /todos API를 호출하여 Todo 목록을 가져온다.
2. React Query는 결과를 'todo' Key로 캐싱한다.
3. 이후 TodoStats 컴포넌트가 렌더링될 때, 캐시된 데이터를 즉시 반환하여 추가 네트워크 요청을 방지해준다.

---

결과

• TodoList와 TodoStats는 todo Key로 캐시를 공유하며, 효율적으로 데이터를 활용한다.
• 네트워크 요청을 최소화하여 성능이 최적화한다.
• React Query는 데이터가 변경되면 자동으로 업데이트하므로 데이터의 일관성이 유지된다.