React Router에서 URL 매개변수로 저장소 데이터 업데이트

지난 강의에서 우리는 또 다른 라우트와 데이터 편집을 위한 폼 페이지를 추가했습니다. 우리가 남은 작업은 폼에 입력된 데이터를 저장하는 것입니다.

먼저, 제품 데이터를 업데이트하는 함수 updateProduct를 forStorage.js 파일에 추가하겠습니다. 여기에 제품의 id와 변경된 데이터를 전달해야 합니다:

export async function updateProduct(id, updates) {
	await someNetwork();
}

다음으로, 저장소에서 키 'products'로 제품들을 가져와서 id로 변경하려는 제품을 찾습니다. 실패할 경우 오류를 발생시킵니다:

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('No product found for this', id);				
}

그런 다음 찾은 제품에 변경 사항을 적용하고 우리의 함수 setProducts를 사용하여 업데이트된 목록을 저장소에 다시 씁니다:

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('No product found for this', id);
	Object.assign(product, updates);
	await setProducts(products);
	return product;
}

이전 강의 과제에서 생성한 애플리케이션을 가져오세요. 강의 자료를 참고하여 파일 forStorage.js에 저장소의 학생 데이터를 업데이트하는 함수 updateStudent를 추가하세요.