React Router에서 라우트 데이터 로더

지난 강의에서 우리는 상품 데이터를 저장소에서 추출했습니다. 이제 이 데이터를 라우트 엘리먼트에 로드해야 합니다. 이를 위해 로더(loader) 함수가 사용됩니다. 지금 우리는 그것을 생성할 것입니다.

root.jsx를 열고, 여기에 forStorage.js로부터 getProducts를 가져오는 import 줄을 추가합시다:

import { getProducts } from '../forStorage'

import 줄 바로 다음에 그리고 함수 Root 전에 loader 함수의 코드를 작성해 봅시다. 이 함수는 getProducts를 통해 저장소의 상품 데이터를 반환할 것입니다. 일반적으로 이러한 함수는 별도의 파일에 작성해야 하지만, 우리는 약간 게으르게 할 것이므로 경고를 무시해도 됩니다:

export async function loader() {
	const products = await getProducts();
	return { products };
}

이제 main.jsx에 우리의 로더를 추가해 봅시다. 이 로더는 루트용이므로 rootLoader라고 이름을 붙이겠습니다:

import Root, { loader as rootLoader } from './routes/root';

그리고 우리의 라우트 객체의 loader 속성에 추가합시다:

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

이전 강의의 과제에서 생성한 애플리케이션을 가져오세요. 강의의 내용을 활용하여 root.jsx 파일에 학생 데이터를 로드하기 위한 loader 함수를 작성하고 main.jsx의 라우트 객체에 추가하세요.