[React] props 대신 redux 사용해보기_4

💡 실습 포인트!

💜 "주문하기" 버튼을 클릭한 상품을 장바구니에 담기

• 오늘은 redux 를 이용하여 특정 상품의 상세 페이지에서 "주문하기" 버튼을 클릭하면 장바구니 페이지로 이동되고, 장바구니 페이지에는 "주문하기" 버튼을 클릭했던 상품이 추가되어 보여지게 해보았다.
• 다만, 이미 장바구니에 담긴 상품을 추가 주문하면 행이 새로 만들어지는 게 아니라 수량만 추가되어야 하는데 이 부분은 아직 미완성이라 조만간 수정을 해보려고 한다.

---

💜 수량 조절 버튼 기능 수정하기

• 지난번에 장바구니 페이지의 수량 조절 버튼 기능을 만들 때, dispatch 할 때 데이터를 받아오는 방법을 몰라서 첫번째 항목만 기능이 작동하도록 하드코딩을 했었다.
• 그래서 이번 수업 내용을 활용하면 수량 조절 버튼 기능도 id 데이터를 받아와서 수정이 가능할 것 같아서 만들어보았다.

---

💜 상세 페이지에서 주문하기 클릭하면 장바구니에 담는 기능 만들기

🤍 "주문하기" 버튼 UI 만들기

<button className="btn btn-danger mx-1">주문하기</button>

• "주문하기" 버튼은 Bootstrap 을 이용하여 이전에 이미 만들어두었다.

---

🤍 "주문하기" 버튼 기능 만들기

let defaultData = [
  { id : 1, name : 'Red Knit', quan : 2 },
  { id : 0, name : 'White and Black', quan : 1 },
  { id : 3, name : 'Flowey', quan : 3 }  
]

• 브라우저에서 "주문하기" 버튼을 눌렀을 때 장바구니 페이지 목록에 품목이 추가되어 보여지게 하기 위해서는, "주문하기" 버튼의 onClick 속성을 활용하여 위 defaultData 에 object 형태로 상세 페이지의 품목을 추가해주어야 한다.

 

1. reducer 에 데이터 수정하는 방법 정의하기

function reducer(state = defaultData, action) {

  if (action.type === 'addItem') {
      let item = action.payload.findId;
      let newState = [...state];
        newState.push({
          id : item.id,
          name : item.title,
          quan : 1
        })
        return newState;
        
    } else if (action.type === 'plus') {
    
      let id = action.payload;
      let newState = [...state];
      newState[id].quan++;
      return newState;
      
    } else if (action.type === 'minus'){
    
      let id = action.payload;
      let newState = [...state];
      if (newState[id].quan > 0) {
        newState[id].quan--;
      }
      return newState;
      
    } else {
    
      return state;
      
    }
}

• 지난 번에 + / - 버튼 기능을 만들 때 사용했던 reducer 에다가 이번에는 'addItem' 으로 if 문을 추가작성해주었다.
• 코드를 해석하자면, 'addItem' 이라는 요청이 들어오면 newState 라는 defaultData 복사본을 만들어주고 여기에 전송받은 데이터를 추가해달라는 것이다.

 

2. dispatch 사용하기

<button className="btn btn-danger mx-1" onClick={()=>{props.dispatch({ type : 'addItem' })}}>주문하기</button>

• 이제 Detail.js 파일의 "주문하기" 버튼에 'addItem' 요청이 들어오면 해당 if 문 안의 코드를 실행해달라고 요청해주는 dispatch 기능을 추가하면 된다.

 

function Store(state) {

  return {
      data : state.reducer,
      alert : state.reducer2
  }

}

export default connect(Store)(Detail);

• 그리고 dispatch 를 사용할 때에는 꼭 하단에 state 를 props 로 만들어주는 함수와 export default connect() 를 추가해주자! 

 

3. dispatch 할 때 데이터 실어보내기

<button className="btn btn-danger mx-1" onClick={()=>{
    props.dispatch({ type : 'addItem', payload : { findId } });
    history.push('/cart');
}}>주문하기</button>

• dispatch 할 때, 안에 type 외에 payload 라는 항목을 만들어주면 데이터를 전송할 수 있다.
  (payload 말고 다른 이름을 사용해도 되지만, 관습적으로 payload 를 사용한다.)
• 나는 여기에 기존에 상세 페이지 데이터바인딩을 위해 사용했던 findId 를 담아 redux 로 전송해주었다.
• 그리고 history.push('/cart') 라는 코드를 추가하여 데이터 전송이후에 바로 장바구니 페이지로 이동할 수 있게 해주었다.

 

4. 전송한 데이터 출력하기 및 가져다 사용하기

• redux 로 전송한 데이터는 reducer 함수 안에서 action.payload 라고 콘솔에 출력해보면 위와 같이 확인이 가능하다.
• 나의 경우 0번 상품의 상세 페이지에서 "주문하기" 버튼을 눌러 payload 에 findId 를 전송해주었기 때문에 위와 같이 0번 상품의 내용이 담긴 findId 가 출력되었다.
• 이제 이렇게 전송받은 데이터 내용에서 필요한 데이터만 뽑아내는 것이 중요한데, 상세 페이지 내용을 기존 defaultData 내에 있는 object 자료형과 통일시킨 후 추가해야 하기 때문이다.

 

// 기존의 각 데이터는 id, title, content, price 로 구성
// findId 에 담긴 데이터는 이 형식을 지님

    {
      id : 0,
      title : "White and Black",
      content : "Born in France",
      price : 120000
    }
 
 
// 추가하고자 하는 데이터는 id, name, quan 으로 구성

{ id : 1, name : 'Red Knit', quan : 2 }

• findId 를 통해 전송받은 데이터는 id, title, content, price 로 구성된 반면, 저장되어야하는 데이터 형태는 id, name, quan 으로 구성되어야한다.

 

// reducer 내의 'addItem' 요청 관련 if 문

if (action.type === 'addItem') {
    let item = action.payload.findId;
    let newState = [...state];
    newState.push({
        id : item.id,
        name : item.title,
        quan : 1
    })
    return newState;
}

• 따라서 payload 를 통해 받아온 findId 를 item 이라는 변수에 저장하여, newState 에 push 해줄 때 id 에는 item.id, name 에는 item.title, quan 에는 1을 넣어주었다.
• 그렇게 새로운 데이터가 추가된 후 return 된 newState 는 Cart.js 파일에서 props.data 로 받아 map() 함수를 거쳐 브라우저의 장바구니 페이지에 표시되는 것이다.