1. 설치

yarn add @tanstack/react-query
또는
npm install @tanstack/react-query

yarn add axios
yarn add -D @types/axios
또는
npm install axios
npm install --save-dev @types/axios

@types/axios = 타입스크립트에서 axios를 인식시키기 위한 타입 정의 파일

2. QueryClientProvider 설정 (앱 전역에 적용)

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>
);

3. API 요청 함수 만들기

import axios from "axios";

export const getResults = async () => {
  const res = await axios.get(
>     "https://api주소"
  );
  return res.data;
};

4. 커스텀 훅으로 useQuery 사용

import { useQuery } from "@tanstack/react-query";
import { fetchUsers } from "../api/example";

export const useUsersQuery = () => {
  return useQuery({
    queryKey: ["users"],
    queryFn: fetchUsers,
  });
};

5. 컴포넌트에서 사용

import { useUsersQuery } from "../hooks/useUsersQuery";

function Home() {
  const { data, isLoading, isError } = useUsersQuery();

  if (isLoading) return <div>로딩 중...</div>;
  if (isError) return <div>에러 발생</div>;

  return (
    <div>
      <h1>사용자 목록</h1>
      <ul>
        {data.map((user: any) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Home;

폴더 구조 example

├── apis/
│ └── api/
│ └── results.ts
│ └── services/
│ └── useGetResults.ts
├── pages/
│ └── Home.tsx
├── types/
│ └── result.d.ts
└── main.tsx

src/
├── api/
│ └── example.ts
├── hooks/
│ └── useUsersQuery.ts
├── pages/
│ └── Home.tsx
├── types/
│ └── user.d.ts
└── main.tsx