React - Redux 5 : 장바구니 기능 만들기 숙제

🖤 숙제1. 수량 + 1 기능 만들기

• 버튼을 누르면 state를 수정해야 하므로 state를 +1 해주는 수정함수부터 먼저 만든다.

let cart = createSlice({
  name : 'cart',
  initialState : [
    {id : 0, name : 'White and Black', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1}
  ],
  reducers : {
    addCount(state, action){
      state[action.payload].count++
    }
  }
}) 

• addCount 라는 함수를 만들고 action 이라는 파라미터를 통해서
  addCount(0) 을 하면 0번째 상품이 +1 되게, addCount(1) 을 하면 1번째 상품이 +1 되게 만든다.

(Cart.js)

<tbody>
  {
    state.cart.map((a, i)=>
      <tr key={i}>
        <td>{state.cart[i].id}</td>
        <td>{state.cart[i].name}</td>
        <td>{state.cart[i].count}</td>
        <td>
          <button onClick={()=>{ dispatch(addCount(i)) }}>+</button>
        </td>
      </tr>
     )
   }
</tbody> 

• i 변수는 반복문에서 생성해주는 0, 1, 2 이렇게 1씩 증가하는 숫자이므로 addCount(i) 이렇게 i 변수를 넣어 작동이 잘 되게 만들었다.

🖤 조금 더 정확하게 만들기

• "버튼을 누르면 버튼 옆에 있는 상품 id를 가져와서 똑같은 id를 가진 상품을 state에서 찾아 그걸 +1 해주세요" 라고 코드짜는게 더 확실하다.
  그래야 나중에 상품순서가 바뀌어도 잘 동작하기 때문이다.

dispatch(addCount(state.cart[i].id)) 

1. 버튼을 누르면 옆에 있던 상품 id를 payload로 전송하라고 해놓고

let cart = createSlice({
  name : 'cart',
  initialState : [
    {id : 0, name : 'White and Black', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1}
  ],
  reducers : {
    addCount(state, action){
      let 번호 = state.findIndex((a)=>{ return a.id === action.payload })
      state[번호].count++
    }
  }
}) 

2. "payload와 같은 id를 가진 상품을 찾아서 +1 해주세요" 라고 코드를 짠다.

• a.id와 payload가 같으면 그게 몇번째 자료인지 번호 라는 변수에 저장하라는 뜻이다.
• array 자료에서 원하는 항목을 찾으려면 반복문, find(), findIndex() 골라서 쓰면 된다.

🤍 findIndex()

• array 뒤에 붙일 수 있다.
• a라는 파라미터는 array 안에 있던 하나하나의 자료이다.
• array에 있던 자료를 다 꺼내서 조건식에 대입해보는데 조건식이 참이면 그게 몇번째 자료인지알려준다.

🖤 숙제2. 주문버튼 누르면 state에 새로운 상품 추가하기

• 상세페이지의 주문하기 버튼을 누르면 장바구니 state에 항목이 하나 추가되어야한다.

let cart = createSlice({
  name : 'cart',
  initialState : [
    {id : 0, name : 'White and Black', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1}
  ],
  reducers : {
    addCount(state, action){
      state[action.payload].count++
    },
    addItem(state, action){
      state.push(action.payload)
    }
  }
}) 

1. addItem이라는 함수를 만들었다.
   addItem( {id : 2, name : 'Grey Yordan', count : 1} )
   이렇게 사용하면 상품이 state에 추가가 된다.

(Detail.js)

<div className="col-md-6">
  <h4 className="pt-5">{result.title}</h4>
  <p>{result.content}</p>
  <p>{result.price}원</p>
  <button className="btn btn-danger" onClick={()=>{
    dispatch(addItem( {id : 1, name : 'Red Knit', count : 1} ))
  }}>주문하기</button>
  </div>
</div> 

2. 상세페이지에서 주문 버튼을 누르면 addItem() 을 실행해달라는 코드를 짰다.