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

💡 실습 포인트!

• 오늘은 redux 를 사용하여 수량 조절 버튼을 만들어보았다.
• 다만 지금은 reducer() 에 0번 인덱스에 해당하는 1번 상품만 + 버튼과 - 버튼으로 수량 조절이 가능하게끔 해두어서 다른 상품들은 수량 조절이 불가하다.
• 파라미터로 인덱스를 넣을 수는 없을까 고민해보고 코드를 수정해보았지만 아직 redux 에 대한 공부가 부족해서인지 맘처럼 되지는 않았다.
• 차근차근 배우면서 구글링해보고 나중에 다시 해봐야겠다. 

---

💜 redux 를 사용하여 state 데이터 수정하는 방법 알아보기

• reducer 함수를 만들어서 데이터 수정하는 방법을 정의한다.
• 원하는 위치에서 dispatch() 함수를 사용하여 reducer 에 수정해달라고 요청한다. 

---

💜 장바구니 품목 수량 조절 버튼 만들기

• 수량 열에 해당하는 행마다 + / - 버튼을 하나씩 만들어서 각 버튼을 클릭하면 해당 상품의 수량이 1씩 증가 혹은 감소하도록 만들어보았다.

🤍 수량 조절 버튼 UI 만들기

let ChangeNum = styled.button`
    border: 1px solid lightgrey;
    border-radius : 5px;
    margin: 0 15px;
    width: 25px;
`

• button 태그를 만들어서 css 로 꾸미는 것보다 styled-components 라이브러리를 사용하여 디자인하는 게 편해서 해당 라이브러리로 ChangeNum 이라는 Component 를 만들어주었다.

 

<td>
    <ChangeNum>+</ChangeNum>
        {item.quan}
    <ChangeNum>-</ChangeNum>
</td>

• + 버튼과 - 버튼은 동일한 디자인이어야 하므로 둘 다 <ChangeNum></ChangeNum> 으로 감싸주었다.

---

🤍 reducer 셋팅하기

// 첫번째 방법

function reducer(){
  return [
    { id : 1, name : 'Red Knit', quan : 2 },
    { id : 0, name : 'White and Black', quan : 1 },
    { id : 3, name : 'Flowey', quan : 3 }  
  ]
}

let store = createStore(reducer);

• 데이터를 수정하는 방법은 reducer 로 만들어주면 된다.
• reducer 는 state 초기값과 state 데이터 수정방법이 들어있는 함수의 형태라고 생각하면 된다.
• 첫번째 방법은 기존에 createStore() 안에 들어있던 데이터를 reducer() 로 옮겨서 return 하도록 만드는 것인데, 별 기능은 없지만 이렇게 하면 셋팅완료이다.

 

// 두번째 방법

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

function reducer(state = defaultState, action){
  return state
}

let store = createStore(reducer);

• 두번째 방법은 따로 defaultState 와 같이 state 변수를 만들어준 다음, 그걸 reducer() 에 default 파라미터 문법으로 넣어주는 것이다.
• 참고로 default 파라미터 문법이란 함수를 만들 때, 실수 혹은 의도적으로 파라미터 입력을 하지 않은 경우에 기본으로 가질 파라미터를 부여하는 것으로, 파라미터 선언할 때 등호(=)와 함께 기본값을 적어주면 된다.

---

🤍 reducer 에  데이터 수정방법 정의하기

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

function reducer(state = defaultState, action){
  if (action.type === 'plus') {
  	return (기존 값에 +1 된 새로운 state);
  } else if (action.type === 'minus') {
  	return (기존 값에 -1 된 새로운 state);  
  } else {
    return state;
  }
}

let store = createStore(reducer);

• reducer 에 데이터 수정방법을 위와 같이 정의해보았다.
  • 먼저, plus 라는 데이터 수정방법 이름을 하나 지어준다.
    (이는 나중에 action.type === 수정방법_이름 과 같은 형태로 사용하는데, 나의 경우 'plus', 'minus' 로 총 2개를 만들어주었다. )
  • if 문 안에는 'plus' 라는 요청이 들어올 경우에는 어떤 state 를 return 할지, 'minus' 라는 요청이 들어올 경우에는 어떤 state 를 return 할지, 그리고 그 외 요청이 들어올 때는 어떤 state 를 return 할지 작성해주면 된다.

 

<td>
    <ChangeNum onClick={ ()=>{ props.dispatch({ type : 'plus' }) } }>+</ChangeNum>
        {item.quan}
    <ChangeNum onClick={ ()=>{ props.dispatch({ type : 'minus' }) } }>-</ChangeNum>
</td>

• 데이터 수정방법을 정의했다면 이제 버튼을 눌렀을 때, 특정 데이터 수정방법을 실행할 수 있도록 onClick 속성을 이용하여 코드를 작성해주면 되는데, 이 때 dispatch() 를 사용하여 html 안에서 reducer() 를 동작시킬 수 있다.
• 그래서 위와 같이 코드를 작성해주면 + 버튼을 누를 때는 plus 라는 state 수정방법이 동작하고, - 버튼을 누를 때는 minus 라는 state 수정방법이 동작한다.

---

🤍 reducer 코드 완성하기

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

function reducer(state = defaultState, action){

  if (action.type === 'plus') {
      let newState = [...state];
      newState[0].quan++;
      return newState;
      
  } else if (action.type === 'minus') {
      if (newState[0].quan > 0) {
        newState[0].quan--;
      }
      return newState;
      
  } else {
    return state;
  }
  
}

let store = createStore(reducer);

• 우선, 첫번째 품목만 데이터가 정말 수정이 되도록 만들어보았다.
• array 자료형이나 object 자료형의 state 를 수정하기 위해서는 깊은 복사를 한 사본을 만드는 게 중요하다.
• 따라서, action.type 이 plus 인 경우에 state 의 사본인 newState 를 만든 후에 newState 의 첫번째 품목인 0번 인덱스의 수량인 quan 을 +1 처리해주고 수정사항이 반영된 newState 를 return 해주었다.
• action.type 이 minus 인 경우에도, action.type 이 plus 인 경우와 유사하게 처리해주면 된다.
• 다만, 연속하여 - 버튼을 클릭했을 때 숫자가 음수가 되므로 숫자가 0 보다 큰 경우에만 -1 을 해주도록 코드를 추가해주었다.