React Router에서 로더로 얻은 데이터 사용하기

지난 강의에서 loader를 사용하여 저장소에서 데이터를 가져왔습니다. 이 데이터를 사용하기 위해, useLoaderData 훅을 사용합니다. root.jsx 파일을 열고 훅을 임포트에 추가해 보겠습니다:

import { Outlet, Link, useLoaderData } from 'react-router-dom';

이제 Root 함수에서 데이터를 products 상수로 받아서 이를 사용할 것입니다. 제품이 있으면 목록이 표시되고, 없으면 단락에 'no products here ...'를 출력합니다. nav 태그 안에서 이제 가져온 제품들을 출력하기 위한 표준 루프를 사용합니다. 각 항목은 Link 컴포넌트로 감싸지고 각자 자신의 주소를 가집니다 (이에 대해서는 나중에 이야기하겠습니다). 따라서 제품에 이름이 없으면 기본값으로 'Unnamed'가 출력됩니다. 그렇다면, 위에서 말한 내용을 고려하여, 이제 Root 함수의 코드는 다음과 같을 것입니다:

function Root() {

	const { products } = useLoaderData();
	return (
		<div id="main">
			{products.length ? (
				<nav>
					{products.map((product) => (
						<Link key={product.id} to={`products/${product.id}`}>
							{product.name ? product.name : <i>Unnamed</i>}
						</Link>
					))}
				</nav>
			) : (
				<p><i>no products here ...</i></p>
			)}
			<div id="product">
				<Outlet />
			</div>
		</div>
	);
}

지금 애플리케이션을 재시작하고 메인 페이지로 이동하면 'no products here ...'만 보일 것입니다. 아직 저장소에 어떤 제품도 넣지 않았기 때문입니다.

이전 강의의 과제에서 만든 애플리케이션을 가져오세요. 강의 자료를 활용하여, 강의에서 설명한 대로 로더에서 얻은 학생 데이터를 표시하도록 추가하세요.