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

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

import { getProduct } from '../forStorage';

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

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

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

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

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

const { product } = useLoaderData();

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

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

다음과 같이 변경합니다:

<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라고 부르겠습니다:

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

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

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

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

이전 강의 과제에서 만든 애플리케이션을 가져오세요. 강의 자료를 활용하여 loader를 구현하고, 연결한 후 학생 페이지에 해당 데이터를 사용하세요.