React Router에 또 다른 경로 추가하기

홈페이지로 연결되는 루트 경로가 있으며, 홈페이지에는 제품에 대한 링크가 있습니다. 이제 오류 화면이 아닌 제품 페이지가 표시되도록 다른 경로를 추가해 보겠습니다.

먼저, 이전 수업에서 작업한 애플리케이션을 열고 routes 폴더에 product.jsx 파일을 생성하겠습니다. 이 파일에 Product 컴포넌트를 만들겠습니다:

function Product() {}

export default Product;

이제 Product 내부에 name, cost, amount 속성을 가진 product 객체를 생성하겠습니다. 지금은 몇 가지 고정된 값으로 설정하겠습니다:

function Product() {
	const product = {
		name: '제품',
		cost: 400,
		amount: 5,
	};
}

export default Product;

그리고 제품 페이지에는 해당 제품의 이름, 비용 및 수량을 표시하겠습니다:

return (
	<div>
		<h2>제품 페이지</h2>
		<p>이름: {product.name}</p>
		<p>비용: {product.cost}</p>
		<p>수량: {product.amount}</p>
	</div>
);

main.jsx 파일에서 Product 컴포넌트를 반드시 import하세요:

import Product from './routes/product';

마지막으로, 애플리케이션에 또 다른 경로를 추가하겠습니다. 루트 경로 바로 뒤에 추가합니다. 경로로 'products/:productId'를 지정하고, 표시할 요소는 Product 컴포넌트입니다:

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

이제 애플리케이션을 실행하고, 링크를 클릭하면 오류 페이지가 아닌 제품 페이지로 이동합니다 (현재는 모든 링크에 대해 동일한 페이지입니다).

이전 수업 과제에서 생성한 애플리케이션을 사용하세요. 수업 자료를 참고하여 비슷한 방식으로 student.jsx 파일을 생성하고, 학생 페이지에는 이름, 성, 입학 연도 및 전공을 표시하세요. main.jsx 파일에 학생 페이지에 대한 새 경로를 추가하고, path 값을 'students/:studentId'로 설정하세요. 링크를 클릭했을 때 학생 페이지로 이동하는지 확인하세요.