React Router에서 URL 매개변수를 통해 로더 데이터 가져오기

지난 강의에서 상품 페이지 데이터를 가져오는 함수를 작성했으니, product.jsx 파일에서 getProduct를 임포트하겠습니다:

routes/product.jsximport { getProduct } from '../forStorage';

임포트 후 그리고 Product 함수 전에 로더 함수 loader를 작성하겠습니다. 여기에 URL 매개변수를 전달합니다:

routes/product.jsxexport async function loader({ params }) {
  const product = await getProduct(params.productId);
  return { product };
}

로더에서 가져온 데이터를 사용하기 위해 훅 useLoaderData도 임포트합니다:

routes/product.jsximport { useLoaderData } from 'react-router-dom';

useLoaderData를 적용하고, 이에 따라 Product 함수 시작 부분의 객체 product 생성 라인을 다음으로 변경합니다:

routes/product.jsxconst { product } = useLoaderData();

그리고 물론, 이전 객체 product를 제거했기 때문에 마크업을 약간 변경하겠습니다. 단락 내용을 변경합니다:

routes/product.jsx<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

다음과 같이 변경합니다:

routes/product.jsx<p>Name: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Cost: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Amount: {product.amount ? product.amount : <i>unknown</i>}</p>

이제 main.jsx를 열고 loader를 임포트해야 합니다. 이를 productLoader라고 부르겠습니다:

main.jsximport Product, {
  loader as productLoader,
} from './routes/product';

그리고 상품 페이지 라우트 객체의 로더로 지정하여, children 내부의 element 속성 다음에 추가합니다:

main.jsxchildren: [
  {
    path: 'products/:productId',
    element: <Product />,
    loader: productLoader,
  },
],

이제 상품 페이지 데이터 로딩에 대해 모두 다뤘습니다! 다만, 아직 로드할 것이 없습니다. 앱을 실행하고, 상품을 몇 개 추가하고 목록에서 클릭해보며 모든 것이 작동하는지 확인하세요.