useLoaderData란?

useLoaderData는 react-router-dom에서 제공하는 훅으로,
페이지가 렌더링되기 전에 필요한 데이터를 미리 로드할 수 있게 해줌

사용법

1. 라우터 설정: loader 속성에 데이터 로딩 함수 설정

const router = createBrowserRouter([
  {
    path: '/product/:id',
    element: <ProductPage />,
    loader: async ({ params }) => {
      const response = await fetch(`/api/products/${params.id}`);
      return response.json();
    },
  },
]);

2. useLoaderData 사용: 컴포넌트에서 로드된 데이터 사용

import { useLoaderData } from 'react-router-dom';

function ProductPage() {
  const product = useLoaderData();
  return <div>{product.name}</div>;
}

장점

서버 데이터 로딩: 라우터와 함께 데이터를 미리 로드하여 렌더링 시 즉시 사용
성능 최적화: 클라이언트에서 불필요한 데이터 로딩을 줄이고, 성능을 개선