[React] 쇼핑몰앱 장바구니기능을 구현해보자

props를 이용해 끌어올리기로 자식의자식의자식의자식이 부모컴포넌트의 상태를 관리하기위해

그 중간 자식컴포넌트들은 단순히 데이터를 전달하는 현상을 Props Drilling이라고 한다.

 

전역 상태 관리 라이브러리인 Redux를 본격적으로 사용해보기 전에

Props Drilling으로 인해 불필요한 랜더링이 일어나고

코드의 가독성, 유지보수가 어려운 점을 직접 경험해보는 과제를 진행했다 :)

 

끌어올리기는 비효율적인게 아니라 비효율적인 상황에 있다! by냠냠맨

일단 컴포넌트의 구조는 이렇다.

메인 컴포넌트인 App.js에는 2가지 상태가 있다.

 

1. 상품목록

2. 장바구니에 당긴 상품 목록

 

상품목록을 변경할 일은 아직 없으므로

상품목록 변경함수를 제외한 나머지 상태들은 

상품리스트와 장바구니에서 모두 필요하다.

 

---

1.  장바구니 담기 클릭시 해당상품이 추가되도록 구현

  const handleClick = (itemId) => {
    if ( //!cartItems.find((el)=>el.itemId === itemId)
      cartItems.filter((el) => {
        return el.itemId === itemId;
      }).length !== 0
    ) {
      setCartItems(
        cartItems.map((el) => {
          if (el.itemId === itemId) {
            el.quantity += 1;
          }
          return el;
        })
      );
    } else {
      setCartItems([...cartItems,{itemId:itemId,quantity:1}])
    }
  };

장바구니 담기 버튼을 클릭할 때 마다

장바구니에 담긴 아이템의 배열의 상태인 CartItem에

클릭 아이템과 같은 아이디의 제품이 있어서

그 배열의 길이가 0이 아니라면

 

setCartItems()상태변경 함수를 이용해

장바구니 아이템의 quantity값을 1씩 올려준다.

 

배열의 길이가 0이라면

기존의 배열에 새로운 아이템의 정보를 가진 객체를 넣어준다.

 

2. 장바구니 내 [삭제] 버튼을 이용해 장바구니의 상품이 제거되도록 구현하세요.

  const handleDelete = (itemId) => {
    setCheckedItems(checkedItems.filter((el) => el !== itemId));
    setCartItems(cartItems.filter((el) => el.itemId !== itemId));
  }

장바구니 아이템이 변경되어야하므로

setCartItems()함수를 이용해서 삭제버튼이 클릭된 아이템의 itemId와 다른 값을 가진 배열을 새로 만들어준다.

 

3. 장바구니 내에서 각 아이템 개수를 변경할 수 있도록 구현하세요.

  const handleQuantityChange = (quantity, itemId) => {
    const newCartItems = cartItems.map(el =>{
      if(el.itemId === itemId){
        return {'itemId': itemId, 'quantity' : quantity}
      }else {
        return el
      }
    })
    setCartItems(newCartItems)
  }

장바구니 아이템인 배열안의 요소의 값을 변경해야하므로

cartIems의 요소를 하나씩 돌면서 만약에 그 요소의 itemId가 클릭된 itemId와 일치하면

클릭이벤트로 전달받은 quantity와 itemId로 업데이트 해준다.

 

일치 하지 않는다면 그대로 반환한다.

 

이때 상태변경함수인 setCartItems에 새로운 배열을 안넣어줘서 애먹었었다 ㅠㅠ

4.  장바구니의 상품 개수의 변동이 생길 때마다, 상단 내비게이션 바에 상품 개수가 업데이트되도록 구현하세요.

function Nav({cartItems}) {
  return (
    <div id="nav-body">
      <span id="title">
        <img id="logo" src="../logo.png" alt="logo" />
        <span id="name">CMarket</span>
      </span>
      <div id="menu">
        <Link to="/">상품리스트</Link>
        <Link to="/shoppingcart">
          장바구니<span id="nav-item-counter">{cartItems.length}</span>
        </Link>
      </div>
    </div>
  );
}

 

카드안에 담긴 상품들은 배열로 저장되어있다.

그 길이를 넣어주면 장바구니의 상품 개수를 업데이트 해줄 수 있다.

 

이부분 정말.....

장바구니에 담긴 물건의 총 개수를 구하는건줄 알고

2시간을 이 간단한 로직 하나에 매달렸었다.

cartItems배열의 길이로도 써봤는데

총 quantity값이 올라가는게 아니잖아? 하고 지우고..

뻘짓도 나를 성장시킨다! 화이팅 !!