[React] 간단한 카카오 굿즈샵 만들기 리뷰2

저번에 기록한 카카오 굿즈샵 2편이다.
 
이번에 추가한 기능은 아래와 같다.

• 장바구니에 상품 추가 시 중복방지
• 장바구니 페이지 체크리스트 활성화
• 장바구니 페이지 선택된 상품의 총 가격, 개수 구하기

---

  function handleAddToBtn() {
    // UI 핸들링
    setShow(!show);
    // 로컬 저장소 값 가져오기
    const localCart = localStorage.getItem('cart');
    const parsedCart = JSON.parse(localCart);
    // 로컬스토리지에 상품 정보가 없다면 item 추가 후 저장
    if(!localCart) {
      localStorage.setItem('cart', JSON.stringify([item]));
    } else {
    // 로컬스토리지에 상품 정보가 있다면 중복 확인
      const found = parsedCart.findIndex(a => a.id == item.id);
      // 중복값이 없다면 item 추가 후 저장
      if(found == -1){
        parsedCart.push(item);
        localStorage.setItem('cart', JSON.stringify(parsedCart));
      // 중복값이 있다면 findIndex에서 구한 값으로 해당 요소의 개수만 증가
      } else {
        parsedCart[found].quantity ++;
        localStorage.setItem('cart', JSON.stringify(parsedCart));
      }
    }
  }

장바구니에 상품 추가 시 중복방지 코드
 
Array.findIndex() 함수로 추가하려는 값이 중복되는지 알 수 있다.
findIndex() 함수는 해당 배열에서 사용자가 원하는 값을 만족하는 index를 찾아주며, 값을 만족하지 않으면 -1 값을 리턴한다.

---

 

체크리스트 및 장바구니 기능

장바구니 페이지 체크리스트 활성화, 장바구니 페이지 선택된 상품의 총 가격 및 개수 구하기 기능이 포함되어 있다.
 
처음에는 별거 아닐 거라 생각하고 시작했는데,, 반나절동안 여기에 매달려있었다,,
 
체크리스트의 핵심 기능은 Array.map() 함수와 checkbox 태그의 onChange 함수.
그리고 총 가격 및 개수 구하기의 핵심 기능은 Array.reduce() 함수와 Array.filter() 함수였던 것 같다.
 
체크리스트 관련 코드는 너무 지저분해서 정리가 안될 것 같기에 짧고 깔끔한 total 관련 코드만 저장해 놔야겠다.

---

const checkedCart = cart.filter(a => a.checked == true);
const unCheckedCart = cart.filter(a => a.checked == false);
  
// 체크 된 상품의 총 가격, 개수 구하기
const totalQuantity = checkedCart.reduce((acc, item) => acc + item.quantity, 0);
const totalPrice = checkedCart.reduce((acc, item) => acc + item.quantity * item.price, 0);

단순히 페이지 내부의 모든 아이템의 개수와 가격을 구하는 게 아니라, 체크된 상품의 개수와 가격을 알아내야 하는 작업이었다.
 
코드가 복잡해질수록 해결했을 때 그만큼 더 기쁜 것 같다.
그리고 이번 프로젝트를 하며 느낀 거지만 JS는 배열 관련 함수가 어마어마하게 많고, 많이 사용하는 것 같다. @@