React Router에서 경로 제거하기

저장소에서 데이터를 삭제하는 함수는 작성했습니다. 이제 제품 페이지 레이아웃에 제품 삭제 버튼을 위한 코드를 추가해 보겠습니다. 편집 버튼 바로 뒤에 추가할 것입니다. 두 버튼 폼을 모두 div #control로 감싸겠습니다. 그런 다음 action에 값 'delete'을 기록합니다. 또한 사용자가 제품을 정말 삭제할지 다시 한 번 확인할 수 있도록 대화 상자를 추가하겠습니다:

<div id="control">
	<Form action="edit">
		<button type="submit">편집</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('이 제품을 삭제하시겠습니까?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">삭제</button>
	</Form>
</div>

CSS 파일에도 스타일을 추가하겠습니다:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

이제 제품 삭제를 위한 새로운 경로를 생성하겠습니다. 이를 위해 routes 폴더를 열고 그 안에 delete.jsx 파일을 생성하세요. redirect와 삭제 함수 deleteProduct를 바로 가져오겠습니다:

import { redirect } from 'react-router-dom';
import { deleteProduct } from '../forStorage';

그런 다음, 당연히 id를 기준으로 deleteProduct를 호출하고, 삭제 후 메인 페이지로 리디렉션하는 action 함수를 작성합니다:

export async function action({ params }) {
	await deleteProduct(params.productId);
	return redirect('/');
}

이제 main.jsx를 열기만 하면 됩니다. action을 가져옵니다:

import { action as deleteAction } from './routes/delete';

그리고 삭제 경로의 action 메서드 값으로 설정합니다. 경로 객체 자체는 children 배열의 끝에 추가하겠습니다:

{
	path: 'products/:productId/delete',
	action: deleteAction,
},

이제 어떤 제품을 클릭하고 삭제 버튼을 사용하여 삭제할 수 있습니다. 개발자 도구의 localforage를 확인하여 이를 확인할 수 있습니다.

이전 수업 과제에서 만든 애플리케이션을 가져오세요. 수업 자료를 활용하여 학생 삭제 버튼을 추가하고, 삭제를 위한 새로운 경로를 만들고, 이를 자식 경로에 추가하세요. 모든 기능이 작동하는지 확인하세요.