쇼핑리스트에 새로운 품목을 추가했는데, 기존 리스트에 있는 품목임에도 새로운 리스트로 추가됨 -> 이름이 같은 경우 기존 리스트의 수량 변경으로 수정.

기존 코드

  const addList = (newItem) => {
      setLists((currItem) => {
       return [...currItem, { ...newItem, id: uuid() }];
     });
   };

기존에 알고있던 map, filter로 할 수 있을지 고민하다, boolean 값을 반환하는 some 메소드를 사용해보기로 했다.

Array.some 은 배열 내 각각의 요소를 순회하면서 true/false 여부를 확인하고, 적어도 하나의 true값이 나오는 즉시 배열 순회를 멈춘다.

_true 가 나오면 즉시 멈춘다는 점에서 map이나 filter보다 빠르지 않을까?_🤔

수정 코드

const addList = (newItem) => {
    const isSameProduct = lists.some((currItem) => {
      currItem.product === newItem.product;
    });
    if (isSameProduct) {
      lists.map((currItem) => {
        if (currItem.product === newItem.product) {
          currItem.quantity += newItem.quantity;
          setLists((currItem) => {
            return [...currItem];
          });
        }
      });
    } else {
      setLists((currItem) => {
        return [...currItem, { ...newItem, id: uuid() }];
      });
    }
  };

먼저 Array.some 메소드의 결과값을 isSameProduct 변수로 받고, Boolean결과에 따라 함수를 실행한다.
분명 맞게 쓴 것 같은데...같은 품목을 추가해도 isSameProduct의 결과값이 console.log으로 확인해보아도 계속 false만 나온다.

화살표함수 주의사항

const isSameProduct = lists.some((currItem) => {
      return currItem.product === newItem.product;
    });

화살표함수의 경우 중괄호와 "return"을 제거하면 반환이 암시된다. 반면 습관적으로 중괄호로 함수를 작성하고, 화살표함수니까 return을 안적어도되지? 하면서 생략했었던 것😂

따라서 위 코드처럼 중괄호를 사용해 return값을 반환하고자 한다면 return을 반드시 적어야 한다.

쇼핑리스트 review

추가된 리스트 수량변경 개별삭제, 전체Reset 버튼 Local Storage 사용, useEffect