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

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

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

routes/edit.jsxexport async function loader({ params }) {
  const product = await getProduct(params.productId);
  return { product };
}

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

routes/edit.jsximport { getProduct } from '../forStorage';

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

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

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

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

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

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

routes/edit.jsximport { Form, useLoaderData } from 'react-router-dom';

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

routes/edit.jsxconst { product } = useLoaderData();

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

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

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