[리액트]장바구니 상품 선택 삭제

오늘 설명할 것은 장바구니 기능 중 꼭 넣어야 겠다 싶었던 기능인 선택 삭제기능이다.

상품 선택 삭제 기능 코드는 아래와 같다.

선택삭제 버튼

const checkedId = checkedArr.map(item => {
    return item.id;
  });

<button
  className="cancelBtn"
  onClick={() => {
    removeChild(checkedId);
    checkedDeleteHandler();
  }}
>
  선택 삭제
</button>

“선택 삭제” 라는 버튼을 클릭하면 removeChild함수가 실행된다. 인자로 checkedId를 넘긴다.

checkedId는 checkedArr라는 체크된 상품만을 모아둔 배열을 map을 돌려서 해당 상품들의 id값만들 모아둔 배열이다.

checkedDeleteHandler 함수는 잠시 뒤에 설명하겠다.

  const removeChild = id => {
// 전체 상품 배열
    let removeProducts;
    id.forEach(
      item =>
        (removeProducts = product.filter(
          product => product.product_id !== item
        ))
    );
    id.forEach(
      item =>
        (removeProducts = removeProducts.filter(
          removeProducts => removeProducts.product_id !== item
        ))
    );
    setProduct(removeProducts);
  };

1. 인자로 checkedID 를 받는다.
2. removeProducts라는 삭제할 상품을 제외한 상품을 담을 빈 변수를 만들어 준다.
3. forEach를 사용해 배열을 뜯어내고 요소만큼 filter를 이용해 선택된 상품을 제외한 상품만 removeProducts에 담는다.

여기서 forEach를 두번 쓰는 이유는 [1,2,3]이라는 상품중에 내가 1,2를 지우려고 한다면 forEach를 한번 썻을 때는 [2,3]과 [1,3]이라는 배열 2개가 반환된다.

(1하나를 지운다 하면 [2,3],[2,3]이 반환 되어서 정상적으로 지워진다.)

따라서 결론적으로는 원하는 값인 [3]이 아니라 [2,3],[1,3]으로 아무값도 변하지 않는 것이다.

그래서 forEach를 두번사용하면 [2,3], [1,3]을 한번더 filter해주기 때문에 [3]이 나온다.

마지막으로 나온 3을 product에 set해준다.

삭제 요청

const checkedDeleteHandler = () => {
    checkedArr.forEach(item => {
      return fetch('주소', {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
          authorization: '토큰',
        },
        body: JSON.stringify({
          productId: item.id,
        }),
      });
    });
  };

마지막에 설명하기로 한 checkedDeleteHandler 함수는 BE에게 삭제요청을 보내는 함수이다.

그런데 선택된 배열이 여러개라면 한번의 리퀘스트로 여러개의 상품을 삭제 요청 보내야 한다.

여러 방법들이 존재하지만 나는 forEach를 이용해서 선택된 상품 만큼 요청을 보내는 방식을 선택했다.

마치며

선택삭제 기능을 구현하면서 많은 어려움이 있었지만 끝끝내 완성을 하게되어 굉장히 기뻤던 기능이었던 것 같다.