React Query

React Query는 서버 상태(Server State) 관리를 위한 라이브러리입니다. 보통 REST API 또는 GraphQL 등의 서버에서 데이터를 가져와 사용할 때, 캐싱, 리페치, 로딩 처리, 에러 처리 등을 효율적으로 관리할 수 있게 도와줍니다.

1. React Query란?

• useState/useEffect로 데이터 fetch 관리할 때 발생하는 반복적인 로직(로딩 상태, 에러 핸들링, 재요청 등)을 추상화해서 단순하게 만들어줍니다.
• 클라이언트 상태(useState, useReducer 등)와는 달리, 서버에 저장된 데이터를 가져오는 작업에 최적화된 도구입니다.
• 현재 이름은 TanStack Query이며 @tanstack/react-query로 설치합니다.

2. 설치

npm install @tanstack/react-query

3. 기본 사용법

1) QueryClient 설정

// main.jsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import ReactDOM from 'react-dom/client';
import App from './App';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

2) API 호출 예시

// api.js
export const fetchTodos = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos');
  if (!res.ok) throw new Error('데이터 로드 실패');
  return res.json();
};

3) 데이터 조회 컴포넌트

import { useQuery } from '@tanstack/react-query';
import { fetchTodos } from './api';

function TodoList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  });

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

  return (
    <ul>
      {data.slice(0, 10).map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

export default TodoList;

4. 주요 기능

기능	설명
queryKey	쿼리를 구분하는 고유 키 (캐시의 기준)
queryFn	데이터를 가져오는 함수
isLoading	로딩 중 여부
error	에러 객체
refetch()	수동으로 다시 요청 가능
staleTime	캐시된 데이터가 유효한 시간 설정
enabled	조건이 참일 때만 fetch하도록 설정 가능

5. 기타 기능

• useMutation : POST, PUT, DELETE 같은 데이터 변경 작업에 사용
• invalidateQueries : 데이터 변경 후 특정 쿼리를 무효화해서 다시 불러오게 함
• devtools : React Query 개발자 도구 지원

npm install @tanstack/react-query-devtools