# 155 [udemy React 완벽 가이드 노트] useReducer 더 활용해보기

현재상황

---

같은 아이템을 클릭해도 계속 목록에 새로 추가가 된다.

 

 

 

 

목표 

---

장바구니에 들어있는 아이템을 새로 추가하는 경우, 

기존에 있는 아이템의 갯수만 늘리고 

새로운 아이템 목록으로 추가하지 않게 만들기.

 

 

 

1. totalAmount는 괜찮다.

기존에 있든 말든 total이기 때문에 수량에 맞게 계속 더해나가는 것이 맞다. 

 

 

2. updatedItems를 사용하기 전에 장바구니에 그 item이 기존에 들어있는지 확인하는 코드를 작성한다. 

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

 

findIndex는 배열에서 item의 인덱스를 반환한다. 

기존 스냅샷의 items에 action.item이 있는 경우 반환하게 된다. 

그 인덱스의 아이템을 existingcartItem 변수에 할당해준다. 

 

    const existingCartItem = state.items[existingCartItemIndex]

 

만약 없다면 false가 반환된다. 

 

3. 기존에 있는 item을 추가했다면 수량을 업데이트 하기

 

if (existingCartItem) {
      updatedItem = {
        ...existingCartItem,
        amount: existingCartItem.amount + action.item.amount,
      };
      updatedItems = [...state.items];
      updatedItems[existingCartItemIndex] = updatedItem;
    }

exstingCartItem이 있다면 updatedItem에 existingCartItem을 넣고, 

amount를 기존의 existingCartItem.amount 와 action의 item.amount를 더해서 넣는다. 

 

updatedItems는 기존의 state.items를 복사한 것

updatedItems에 existingCartItemIndex를  updatedItem로 덮어씌운다. 

 

CartItems배열에서 식별한 오래된 항목을 선택하여 updatedItem으로 덮어씌우는 것이다. 

 

 

4. 기존 item이 없을 경우의 문 작성 

 

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

기존 item이 없으므로 updateItem은 새 항목이 된다. 

그리고 updatedItems는 state.items에 action.items 넣은 updatedItem을 concat 한다.