React Router에서 저장소 데이터 삭제하기

우리의 애플리케이션은 새로운 제품을 추가하고, 데이터를 수정할 수 있습니다. 이제 데이터 삭제 기능만 추가하면 됩니다. 이를 위해 우리는 이전 강의들에서 익숙해진 단계들을 다시 따라갈 것입니다.

먼저 forStorage.js 파일을 열고 특정 id를 가진 제품을 삭제하는 마지막 함수 deleteProduct를 추가하겠습니다:

forStorage.jsexport async function deleteProduct(id) {}

그런 다음 저장소에서 제품 목록을 가져와 삭제하려는 제품의 인덱스를 찾습니다. 해당 제품이 존재하면 splice를 사용하여 목록에서 제거합니다. 다음으로 setProducts를 호출하고 새 제품 목록을 저장소에 저장합니다:

forStorage.jsexport async function deleteProduct(id) {
  let products = await localforage.getItem('products');
  let index = products.findIndex((product) => product.id === id);
  if (index > -1) {
    products.splice(index, 1);
    await setProducts(products);
    return true;
  }
  return false;
}