⚡️ React에서 서버 상태 관리하기: useQuery 활용법

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") as HTMLElement).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

import { useQuery } from "@tanstack/react-query";
import { categoryService } from "@/services/categoryService";
import { Category } from "@/types/category";

export const useCategories = () => {
  return useQuery<Category[]>({
    queryKey: ["categories"],
    queryFn: () => categoryService.getCategories(),
    staleTime: 1000 * 60 * 60 * 24, // 24시간
    gcTime: 1000 * 60 * 60 * 24 * 7, // 7일
    refetchOnWindowFocus: false,
  });
};

import React from "react";
import { useCategories } from "@/hooks/useCategories";

export default function CategoryList() {
  const { data, isLoading, error } = useCategories();
  
  if (isLoading) return <p>카테고리를 불러오는 중입니다.</p>;
  if (error) return <p>데이터를 불러오는 데 실패했습니다.</p>;
  
  return (
    <ul>
      {data?.map((category) => (
        <li key={category.id}>{category.name}</li>
      ))}
    </ul>
  );
}