React Router에서 중첩된 라우트

이 강의에서는 중첩된 라우트를 소개합니다. 이전 강의에서 만들었던 애플리케이션을 실행하세요. 링크를 클릭하면 별도의 제품 페이지로 이동합니다. 이 방식이 불편하고 제품 목록과 제품 페이지를 하나의 화면에 나란히 표시하여 더 직관적으로 보여주고 싶다고 가정해 봅시다. 그렇게 만들어 봅시다.

이를 위해 main.jsx 파일을 열고 제품 페이지에 대한 라우트를 루트 라우트의 자식 라우트로 만들거나, 다른 말로 하면 루트 라우트 안에 "중첩"시키면 됩니다. 이를 위해 라우트 객체의 또 다른 속성인 children를 사용하겠습니다:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},

]);

다시 링크를 클릭해도 제품 목록 오른쪽에는 아무것도 보이지 않습니다. 그 이유는 루트 라우트에게 자식 라우트를 어디에 렌더링할지 알려주지 않았기 때문입니다.

부모 라우트에서 자식 라우트의 요소를 렌더링하는 데는 Outlet 컴포넌트가 도움이 됩니다. 라이브러리에서 이를 루트 라우트 파일로 가져옵시다:

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

그런 다음 #product div로 감싸고 nav 닫는 태그 뒤, 레이아웃 마지막 부분에 추가한 다음 전체 구조를 #main div로 한 번 더 감싸겠습니다:

return (
	<div id="main">
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
		<div id="product">
			<Outlet />
		</div>
	</div>
);

이제 링크를 클릭하면 제품 목록과 제품 페이지가 모두 보입니다.

index.css에 약간의 스타일을 추가하겠습니다:

h1, h2 {
	margin: 0;
}

div#main {
	display: flex;
	margin: 20px;
}

div#product {
	margin-left: 40px;
}

이전 강의 과제에서 생성한 애플리케이션을 가져오세요. 강의 자료를 활용하여 학생 페이지 라우트를 루트에 중첩시켜 만드세요.

이제 링크를 클릭했을 때 화면에 학생 목록과 학생 페이지가 모두 표시되도록 만드세요.