React Query - 복잡한 서버 상태 핸들링

npm install @tanstack/react-query

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

const queryClient = new QueryClient();

function Posts() {
  const { data, isLoading, error } = useQuery(['posts'], () =>
    fetch('/api/posts').then(res => res.json())
  );

  if (isLoading) return <p>불러오는 중...</p>;
  if (error) return <p>에러!</p>;

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

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