React Router에서 데이터 편집을 위한 라우트 생성

지난 강의에서 우리는 별도의 React 컴포넌트 EditProduct 안에 편집용 폼을 생성했습니다.

이제 새 라우트를 위한 로더 함수를 import 바로 뒤, 그리고 EditProduct 함수 앞에 작성해 보겠습니다. 이 함수는 product.jsx의 것과 동일할 것입니다. URL 매개변수가 함수에 전달되고, 그 후 id로 제품을 가져올 것입니다:

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

getProduct를 forStorage.js에서 import합니다:

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

이제 main.jsx를 열어 우리가 만든 컴포넌트 EditProduct와 로더를 import하겠습니다:

import EditProduct, { loader as editProductLoader } from './routes/edit';

그런 다음 제품 라우트 바로 뒤에 편집용 라우트 객체를 children 배열에 추가합니다:

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

이제 애플리케이션을 실행하고, 제품을 생성한 다음, 클릭하고, 편집 버튼을 클릭하면 우리의 폼을 볼 수 있습니다.

한 가지 더 해야 할 일은 편집하기 전에 폼 필드에 현재 데이터가 로드되도록 하는 것입니다. 이를 위해 edit.jsx에서 useLoaderData 훅을 import합니다:

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

그리고 EditProduct 함수 내에서 로더로부터 데이터를 가져오기 위해 사용합니다. return 명령어 앞에 추가합니다:

const { product } = useLoaderData();

이제 각 input 태그에 해당 값으로 defaultValue 속성을 추가합니다. 예를 들어, 첫 번째 input은 이제 다음과 같이 보일 것입니다:

<input
	placeholder="name"
	type="text"
	name="name"
	defaultValue={product.name}
/>

나머지 두 개의 input 값은 각각 'product.cost'와 'product.amount'가 될 것입니다. 아직은 폼에 데이터가 없지만요.

이전 강의 과제에서 만든 애플리케이션을 사용하세요. 강의 자료를 활용하여 학생 데이터 편집 라우트를 위한 함수 loader를 edit.jsx에 생성하세요.

children 배열에 데이터 편집용 라우트 객체를 추가하세요.

여러분의 EditStudent 함수에 강의에서 요구한 코드를 추가하세요.