React에서 데이터 페칭 최적화 - Suspense와 React Query

npm install @tanstack/react-query

 

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

const queryClient = new QueryClient();

function fetchData() {
  return new Promise((resolve) =>
    setTimeout(() => resolve(['React', 'Next.js', 'TypeScript']), 2000)
  );
}

function DataList() {
  const { data, isLoading, error } = useQuery(['data'], fetchData);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <React.Suspense fallback={<p>Loading Suspense...</p>}>
        <DataList />
      </React.Suspense>
    </QueryClientProvider>
  );
}

 

React Suspense와 React Query를 결합하면 데이터 페칭이 더 직관적으로 관리됨