React Router에서 라우트 데이터 로더

지난 강의에서 우리는 상품 데이터를 저장소에서 추출했습니다. 이제 이 데이터를 라우트 엘리먼트에 로드해야 합니다. 이를 위해 로더(loader) 함수가 사용됩니다. 지금 우리는 그것을 생성할 것입니다.

root.jsx를 열고, 여기에 forStorage.js로부터 getProducts를 가져오는 import 줄을 추가합시다:

routes/root.jsximport { getProducts } from '../forStorage'

import 줄 바로 다음에 그리고 함수 Root 전에 loader 함수의 코드를 작성해 봅시다. 이 함수는 getProducts를 통해 저장소의 상품 데이터를 반환할 것입니다. 일반적으로 이러한 함수는 별도의 파일에 작성해야 하지만, 우리는 약간 게으르게 할 것이므로 경고를 무시해도 됩니다:

routes/root.jsxexport async function loader() {
  const products = await getProducts();
  return { products };
}

이제 main.jsx에 우리의 로더를 추가해 봅시다. 이 로더는 루트용이므로 rootLoader라고 이름을 붙이겠습니다:

main.jsximport Root, { loader as rootLoader } from './routes/root';

그리고 우리의 라우트 객체의 loader 속성에 추가합시다:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    loader: rootLoader,
    children: [
      {
        path: 'products/:productId',
        element: <Product />,
      },
    ],
  },
]);