React-Query란?

React Query란 무엇인가?

React Query는 서버에서 데이터를 가져오고, 캐싱하고, 갱신하고, 동기화하는 과정을 쉽게 만들어주는 비동기 상태 관리 라이브러리입니다.

기존 방식의 문제점

React에서 데이터를 fetch할 때 보통 다음과 같은 패턴을 반복해야 했습니다:

const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  fetch('/api/data')
    .then((res) => res.json())
    .then(setData)
    .catch(setError)
    .finally(() => setLoading(false));
}, []);

→ 중복되고 관리 포인트가 많아지는 문제를 React Query가 해결합니다.

React Query의 핵심 기능

• 자동 캐싱: 동일 요청을 빠르게 응답
• 로딩/에러 상태 자동 제공: isLoading, isError 등 제공
• 백그라운드 리페치: 포커스 시 최신 데이터 재요청
• 자동 리트라이: 실패 시 자동 재시도
• Query 무효화: mutate 후 관련 쿼리 리페치
• Devtools: 쿼리 상태 시각화

기본 사용 예시

useQuery 예시

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

const fetchUsers = async () => {
  const res = await fetch('/api/users');
  return res.json();
}

export default function UserList() {
  const {{ data, isLoading, isError }} = useQuery({{
    queryKey: ['users'],
    queryFn: fetchUsers,
  }});

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error loading users</p>;

  return (
    <ul>
      {{data.map(user => <li key={{user.id}}>{{user.name}}</li>)}}
    </ul>
  );
}

useMutation 예시

import {{ useMutation, useQueryClient }} from '@tanstack/react-query';

const createUser = async (newUser) => {{
  const res = await fetch('/api/users', {{
    method: 'POST',
    body: JSON.stringify(newUser),
  }});
  return res.json();
}}

export default function CreateUser() {{
  const queryClient = useQueryClient();

  const mutation = useMutation({{
    mutationFn: createUser,
    onSuccess: () => {{
      queryClient.invalidateQueries({{ queryKey: ['users'] }});
    }},
  }});

  const handleSubmit = () => {{
    mutation.mutate({{ name: 'Alex' }});
  }}

  return (
    <button onClick={{handleSubmit}}>
      Add User
    </button>
  );
}}

React Query vs 상태관리 라이브러리

비교 대상	목적
React Query	서버 상태 관리 (API 응답 등)
Recoil, Zustand	클라이언트 상태 (UI 상태, 모달 등)

React Query를 언제 써야 할까?

• API 데이터를 자주 가져올 때
• 컴포넌트 간 서버 상태 공유가 필요할 때
• 캐싱과 리페치를 효율적으로 관리하고 싶을 때
• SSR, SSG와 함께 사용할 때

React Query 설정

import {{ QueryClient, QueryClientProvider }} from '@tanstack/react-query';

const queryClient = new QueryClient();

export default function App({{ children }}) {{
  return (
    <QueryClientProvider client={{queryClient}}>
      {{children}}
    </QueryClientProvider>
  );
}}

마무리 요약

React Query는 "API 데이터를 다루는 모든 고통을 없애주는 훅 기반의 강력한 도구"입니다.

• fetch + useEffect 지옥 탈출
• 캐싱, 로딩 상태, 오류 처리 자동
• 비즈니스 로직에 집중 가능