React Router에서 FormData로 데이터 업데이트하기

스토리지에서 제품 데이터를 업데이트하는 함수 updateProduct가 있습니다. 이제 편집 폼에서 데이터로 넘어가 보겠습니다.

HTML 폼이 제출될 때 브라우저는 데이터로 FormData 객체를 생성하고 요청 본문에 담아 서버로 보냅니다. 또한 각 입력 필드의 값은 name 속성에서 추출되어 객체에 담깁니다(그래서 폼에 필요한 것이었습니다, 기억나시나요?). 이제 우리는 React Router가 요청을 서버가 아닌 라우트의 action 메서드로 보낸다는 것을 알고 있으며, 따라서 FormData도 거기에 전달됩니다. 이제 이것을 다루어 보겠습니다.

먼저 edit.jsx 파일을 열고 updateProduct를 임포트합니다:

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

그런 다음 이전에 했던 것처럼 라우트 객체의 action 함수를 작성하겠습니다. loader 함수 바로 뒤에 추가합니다. 이 함수에 request와 URL 매개변수를 전달할 것입니다:

export async function action({ request, params }) {}

요청에서 FormData를 얻은 다음, 키: 값 쌍을 포함하는 객체 형태로 데이터를 추출하고, updateProduct를 사용하여 이 데이터를 스토리지로 보냅니다:

export async function action({ request, params }) {
	const formData = await request.formData();
	const updates = Object.fromEntries(formData);
	await updateProduct(params.productId, updates);
	return 1;
}

이제 main.jsx로 가서 편집 라우트 객체에 action 함수를 추가하기만 하면 됩니다. 먼저 action를 임포트합니다:

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

그리고 편집 라우트 객체에 추가합니다:

{
	path: 'products/:productId/edit',
	element: <EditProduct />,
	loader: editProductLoader,
	action: editAction,
},

이제 애플리케이션을 실행하고, 목록에 몇 가지 제품을 추가한 다음, 각 제품을 클릭하여 폼을 작성하고 저장 버튼을 누르세요. 개발자 도구에서 localforage 섹션으로 들어가 스토리지를 새로 고침하는 것을 잊지 마세요. 이제 keyvaluespairs 섹션에서 products 배열 안에 입력한 데이터가 포함된 객체들을 볼 수 있습니다.

지난 강의 과제에서 만든 애플리케이션을 사용하세요. 강의 자료를 활용하여 학생 데이터 편집 라우트에 대한 action 함수를 만들고, 편집 라우트 객체에 추가하세요. 개발자 도구를 열고 변경 사항이 적용된 데이터가 실제로 localforage 탭에 표시되는지 확인하세요.