React Router에서 URL 매개변수로 데이터 기록 및 편집

우리 애플리케이션은 이제 스토리지에서 각 개별 제품에 대한 데이터를 불러올 수 있습니다. 이번 강의에서는 URL 매개변수를 통해 제품 정보를 추가하고 편집하는 기능을 구현하기 시작하겠습니다.

데이터를 입력하거나 변경하기 위해 우리는 다시 Form 컴포넌트를 사용할 것입니다. 먼저 product.jsx 파일을 열고 마지막 단락 뒤에(Form을 파일로 임포트하는 것을 잊지 마세요) 제품 데이터 편집을 위한 버튼을 마크업 끝에 추가해 봅시다:

<Form action="edit">
	<button type="submit">편집</button>
</Form>

이제 제품 페이지에 편집 버튼이 있습니다. 다음으로, 이 버튼을 클릭했을 때 데이터를 입력할 수 있는 양식이 있는 페이지로 이동하도록 만들어 보겠습니다. 이를 위해 products/:productId/edit 경로를 하나 더 만들겠습니다. 이를 위한 레이아웃을 만들어 봅시다.

그럼, routes 폴더에 새로운 파일 edit.jsx를 생성하겠습니다. 여기에는 name, cost, amount 필드와 저장 버튼이 있는 양식이 있습니다. 이 모든 것은 EditProduct 컴포넌트 안에 있을 것입니다. 다음 강의에서 필요할 name 속성들을 꼭 명시해 주세요:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>이름:</span>
				<input placeholder="이름" type="text" name="name" />
			</div>
			<div>
				<span>가격:</span>
				<input placeholder="가격" type="text" name="cost" />
			</div>
			<div>
				<span>수량:</span>
				<input placeholder="수량" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">저장</button>
			</p>
		</Form>
	);
}

export default EditProduct;

지난 몇 강의의 과제에서 만든 애플리케이션을 가져오세요. 강의 자료를 활용하여 학생 데이터 편집 버튼을 추가하세요. 학생 정보를 입력하기 위한 양식이 있는 EditStudent 함수와 함께 편집을 위한 파일 edit.jsx를 생성하세요.