✅ React Query 란?

React Query는 React 애플리케이션에서 서버 상태(Server State)를 관리 해주는 라이브러리

보통 REST API나 GraphQL API에서 데이터를 불러올 때 사용하는데, useEffect , useState 로 직접 상태 관리하는 것보다 훨씬 간편하고 효율적임

---

🚀 주요 기능

---

💡 간단한 예제

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

function Todos() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['todos'],
    queryFn: () => axios.get('/api/todos').then(res => res.data)
  });

  if (isLoading) return <p>불러오는 중...</p>;
  if (error) return <p>에러 발생: {error.message}</p>;

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

루트 컴포넌트에 QueryClientProvider 설정

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

const queryClient = new QueryClient();

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

---

📌 언제 쓰면 좋을까?

• API를 자주 호출하거나, 데이터를 자동으로 동기화하고 싶을 때
• 전역 상태 관리로는 해결이 안 되는 서버 중심 데이터를 다룰 때
• 로딩, 에러, 캐싱, 자동 재요청 같은 기능을 수동으로 구현하기 번거로울 때

---

🧩 Redux Toolkit? Recoil?

---

📋 공통점

• React Query 는 **서버 상태(State)**를 위한 도구임
• Redux Toolkit, Recoil은 **클라이언트 상태(client state)**를 관리하는 데 쓰임
• 둘 다 React Query와 상호보완적으로 사용할 수 있음

---

⚔️ React Query + Redux Toolkit

✅ 장점

1. 산업 표준 수준의 구조화
   • Redux는 대규모 팀과 협업에 최적화된 구조를 제공
   • 코드 분리, 미들웨어 처리, 디버깅 툴이 강력함
2. Redux Toolkit으로 보일러플레이트 감소
   • createSlice, createAsyncThunk 등으로 코드 간결화 가능
3. React Query와 기능적 역할 분리 명확
   • 서버 상태는 React Query
   • 전역 UI/로컬 상태는 Redux
4. DevTools, 미들웨어, 확장성 풍부
   • reduxs-persist, redux-saga, redux-thunk 등 다양한 연계 가능

❌ 단점

1. 설정이 복잡함

   • store 구성, slice 분리, 미들웨어 설정 등 진입장벽 존재

2. 상태 연결에 boilerplate 발생

   • 컴포넌트와 연결하려면 useSelector , useDispatch 필요

3. React Query와 용도 혼동 가능

   • asyncThunk vs useQuery 헷갈릴 수 있음

   ---

   🌿 React Query + Recoil

   ✅ 장점

   1. 간단하고 직관적인 API
      • atom , selector 만으로 전역 상태 구성 가능
      • React 개발자에게 더 친숙한 방식
   2. 컴포넌트 간 상태 공유가 자연스러움
      • hook 기반으로 선언적이고 깔끔한 코드 작성
   3. 초기 설정이 거의 없음
      • store 설정 불필요, 바로 atom 만들고 사용 가능
   4. 리렌더링 최적화
      • 상태 단위로 리렌더링이 발생하여 퍼포먼스 효율적

   ❌ 단점

   1. 산업적 채택률 낮음
      • 대형 프로젝트에서는 Redux보다 쓰는 사례 적음
   2. 디버깅 도구 부족
      • 아직 Redux DevTools처럼 강력한 툴은 제한적
   3. 상태 의존성 복잡성
      • selector 간 의존성 관리가 어려울 수 있음

---

🧠 어떤 조합이 좋을까?

---

📌 결론

• React Query는 어디서든 유용하고,
• 상태 관리 도구는 협업 환경, 프로젝트 크기, 팀의 취향에 따라 선택하는 것이 좋다.