[리액트] 상품 개별 삭제 기능

장바구니 기능을 구현 하는데 있어서 상품 개별 삭제는 반드시 필요한 기능이었다.
우선 개별 삭제 기능 코드는 아래와 같다.

부모 컴포넌트

{product.map((product, idx) => (
  <CartProduct
    key={product.product_id}
    product={product}
    setProduct={setProduct}
    setCheckedArr={setCheckedArr}
    removeProduct={removeProduct}
  />
))}

const removeProduct = id => {
    setProduct(
      product.filter(product => {
        return product.id !== id;
      })
    );
    setCheckedArr(
      checkedArr.filter(checked => {
        return checked.id !== id;
      })
    );
  };

자식 컴포넌트

<button
  className="cancelBtn"
  onClick={() => {
    removeProduct(product.id);
  }}
>
  ✕
</button>

1. 상품 하나하나는 부모 컴포넌트에서 자식 컴포넌트를 map을 돌려서 데이터 배열 요소만큼 만들었다.
2. 부모에서 removeProduct라는 함수를 만든다.
3. 자식에게 props로 전달해준다.
4. 자식은 X버튼을 클릭시 removeProduct함수가 실행되면서 본인의 id를 인자로 넘겨준다.
5. 인자로 id를 받은 함수는 product라는 상품 전체 배열을 filter를 이용해 하나씩 뜯어내 각각의 id와 자식으로 부터 받은 인자인 id를 비교해서 해당 id를 제외한 값만을 product 배열에 넣어준다.
6. setProduct에 넣어주면 product가 최신화 되면서 product 배열안에는 삭제를 원한 상품을 제외한 상품만 존재한다.

그런데 setProduct 밑에 setCheckedArr가 있다.

해당 장바구니 기능중 하나는 선택된 상품만 최종가격에 반영이 된다였다.

그래서 체크가 된 상품만을 담는 배열인 checkedArr가 있다.

처음엔 product 배열만 삭제를 하였으나 상품을 삭제 했음에도 최종가격은 변함이 없었다는 것이였다.

그래서 상품을 삭제할 때 checkedArr의 상품도 같이 삭제를 해서 최종가격에도 영향을 주게 구현하였다.

마치며

상품 개별삭제라는 기능을 구현하기 전에는 많이 복잡할거라는 생각을 했었다.
하지만 막상 구현을 해보니 id와 filter만 잘 이용한다면 아주 간단한 기능이였다.
그래서 비슷한 개념인 기능이 있다면 얼마든지 활용할 수 있을거 같다.