# 156 [udemy React 완벽 가이드 노트] 장바구니에서 +, - 버튼 작동시키기

 add(+)버튼 활성화 시키기

먼저 item을 추가하는 버튼을 활성화 시켜보자 

---

 

 

 

 

CartItem 컴포넌트에서 +버튼이 클릭되면

cartItemAddHandler 함수가 실행된다.  

 

그 함수에 cartCtx.addItem을 실행해 item과 amount를 전달하면 된다. 

 

const cartItemAddHandler = item => {
    cartCtx.addItem({ ...item, amount: 1 });
  };

 

이렇게 하면 CartProvider에서

addItemToCartHandler가 item이 할당된 채로 실행되어 

cartReducer의 "ADD" 타입이 실행된다.

 

 

 updatedTotalAmount를 새로 update해준다. 

const updatedTotalAmount =
      state.totalAmount + action.item.price * action.item.amount;

 

 

 

1. 기존에 state.items.에 사용자가 추가한 항목이 이미 있는지 확인

 

const existingCartItemIndex = state.items.findIndex(
      item => item.id === action.item.id
    );

 

해당 인덱스의 아이템을 existingCartItem에 할당

const existingCartItem = state.items[existingCartItemIndex];

 

 

 

 

2. 기존의 state.items에 사용자가 추가한 항목이 이미 있다면

 

 

updateItem에 기존의 existingCartItem을 넣고, 

amount만 기존의 amount에 action.item.amount를 더함 

 

updatedItem = {
        ...existingCartItem,
        amount: existingCartItem.amount + action.item.amount,
};

 

updatedItems에는 기존에 있던 state.items를 넣고, 

updatedItems의 existingCartItemIndex에는 updatedItem을 넣는다. 

 

updatedItems = [...state.items];
updatedItems[existingCartItemIndex] = updatedItem;

 

 

 

 3. 기존의 state.items에 없다면

action.item을 updatedItem에 모두 할당.

 

 

else {
      updatedItem = { ...action.item };
      updatedItems = state.items.concat(updatedItem);
    }

 

 

 

4. return 

 

items: updatedItems와 (각각의 상황에 맞춰 업데이트 된 items)

totalAmount: updatedTotalAmount(각각의 상황에 맞춰 업데이트 된 totalAmount)를

각각 return해준다. 

 

return {
      items: updatedItems,
      totalAmount: updatedTotalAmount,
};

 

 

 

remove(-)버튼 활성화 시키기

---

 

1. 사용자가 -버튼을 클릭한 해당 아이템을 state.items에서 선택해

    변수(existingItem)에 할당해준다. 

 

const existingCartItemIndex = state.items.findIndex(
      item => item.id === action.id
);
const existingItem = state.items[existingCartItemIndex];

 

 

2. updatedTotalAmount를 계산해 준다.

 

const updatedTotalAmount = state.totalAmount - existingItem.price;
let updatedItems;

이 식은 지금 상황에선 항상 옳다. 장바구니에 들어있는 항목이 1개이든, 1개 이상이든, 

버튼을 클릭하면 항상 수량이 1씩 감소하게 되고, 

그렇게 된다면 existingItem의 price만큼 totalAmount에서 빼는 것이기 때문이다.

updatedItems는 if, else문에서 똑같이 사용 할 것이므로 바깥에서 선언해 준다.

 

 

3. 장바구니에 들어있는 항목이 1개인 경우

 if (existingItem.amount === 1) {
      updatedItems = state.items.filter(item => item.id !== action.id);
}

 

항목이 1개라면 사용자가 선택 한 해당 item을 빼고 나머지를 보여줘야 한다.

즉, action.id가 아닌 나머지 state.items의 배열을 updatedItems에 할당해주어야 한다.

 

 

2. 장바구니에 들어있는 항목이 1개 이상인 경우

else {
      const updatedItem = { ...existingItem, amount: existingItem.amount - 1 };
      updatedItems = [...state.items];
      updatedItems[existingCartItemIndex] = updatedItem;
}

1개 이상인 경우는 기존의 item을 그대로 넣어주고

해당 action.id의 amount를 1개 빼준다. 

 

updatedItems에는 state.items를 그대로 넣어주고

updatedItems의 existingCartItemIndex에는 updatedItem을 할당해준다.

 

 

Cart.js파일에서

cartItemRemoveHandler에 cartCtx.removeItem을 해당 id를 할당해 실행해주면 

-버튼이 활성화가 된다. 

 const cartItemRemoveHandler = id => {
    cartCtx.removeItem(id);
  };