[프로젝트] 선택삭제 forEach ? map ?

 

프로젝트를 하면 할수록 내가 맡은 기능에 빈틈이 보여 계속 수정하게된다. 에러로직이나 선택한 상품이 없는 하단에 상품 개수가 보인다던가. 특정 상품만 체크하고 수량을 올렸더니 체크가 모두 활성화된다던가 이런 빈틈들이 잘보이고 유저테스트 이후로 기능 구현을 섬세하게 해야한다는게 얼마나 중요한지 뼈저리게 느꼈다ㅎ 오늘은 체크한 상품들을 선택 삭제하는 기능 구현을 해보려고한다!!

 

 

 

 

DeleteButton.tsx

선택 삭제 버튼을 따로 만들어주었다. 선택 삭제를 염두해두고 상품 삭제하는 로직이 있는 커스텀 훅을 만들어놓아서 코드를 간단하게 짤 수 있었다. 여기서 마주친 문제.. 처음 코드를 쓸 때 map을 사용했었다.

import { useDeleteProduct } from '@/hooks/localFood/useDeleteProduct';

interface ButtonProps {
  selectedItems: string[];
  setSelectedItems: React.Dispatch<React.SetStateAction<string[]>>;
}

export const DeleteButton = ({
  selectedItems,
  setSelectedItems
}: ButtonProps) => {
  const mutation = useDeleteProduct();

  const handleSelectedDelete = () => {
    selectedItems.map((productId) => {
      mutation.mutate(productId);
      return null;
    });

    setSelectedItems([]);
  };

  return (
    <button
      onClick={handleSelectedDelete}
      className="text-base text-label-alternative font-normal"
    >
      선택 삭제
    </button>
  );
};

 

 

그런데 생각해보니까 map은 새로운 배열을 반환하는데 상품을 삭제하는데 굳이? 새 배열을 반환할 필요가 있을까 생각이 들었다. 괜한 메모리 낭비같았다 그래서 다른 메서드를 구글링하다가 forEach 가 적합하겠다고 생각했다 분명 배운건데 코드짤 땐 생각이 안날까,,

 

 

 

forEach와 map의 차이점 → 새로운 배열 생성 반환여부

forEach()

함수는 배열의 각 요소를 순회하며 주어진 함수를 호출합니다. 각 요소에 대해 함수를 호출할 때, 해당 요소의 값, 인덱스, 그리고 원본 배열을 인수로 넘겨줍니다. 주어진 함수는 배열의 크기만큼 반복 실행되며, 배열 요소의 개수에 따라 콜백 함수가 호출되는 횟수가 결정됩니다.

forEach() 함수는 반환 값이 항상 undefined 입니다. 새로운 배열을 생성하지 않습니다.

 

map()

map() 함수는 배열을 순회해서 각 요소를 콜백 함수로 적용해서 처리해 모은 새로운 배열을 반환하기 위한 함수입니다.

map() 함수에 전달되는 콜백 함수는 "각 요소를 변환하여 새로운 배열로 매핑(mapping)하는 역할을 한다"라고 말합니다.
이렇게 매핑된 결과를 새로운 배열로 반환하기 때문에 이 함수의 이름이 "map"으로 정해졌습니다.

 

※ 참고

[Javascript] 다양한 배열 메서드(순회, 반복)를 알아보자

 

 

자바스크립트 forEach() 함수 – 개념 정리 및 사용 예제 - 코딩에브리바디

 

 

 

수정코드

forEach로 짜면 원본 배열에 대한 작업을 수행해서 새로운 배열을 생성하지 않아 메모리 차지를 하지 않는다는 장점이 있다!

import { useDeleteProduct } from '@/hooks/localFood/useDeleteProduct';

interface ButtonProps {
  selectedItems: string[];
  setSelectedItems: React.Dispatch<React.SetStateAction<string[]>>;
}

export const DeleteButton = ({
  selectedItems,
  setSelectedItems
}: ButtonProps) => {
  const mutation = useDeleteProduct();

  const handleSelectedDelete = () => {
    selectedItems.forEach((productId) => {
      mutation.mutate(productId);
    });

    setSelectedItems([]);
  };

  return (
    <button
      onClick={handleSelectedDelete}
      className="text-base text-label-alternative font-normal"
    >
      선택 삭제
    </button>
  );
};