210715 Redux(1)

장바구니 만들기

1. Cart 컴포넌트 이용해서 Cart 페이지 만들고 부트스트랩 이용해서 Table 넣기 (부트스트랩 form을 약간 수정)

//Cart.js

import React from 'react';
import { Table } from 'react-bootstrap';

function Cart() {
  return (
    <div>
      <Table responsive>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>
        <tr>
          <td>1</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </Table>
    </div>
  )
}

export default Cart;

2. 라우터를 설정해서 /cart라고 접속하면 Cart 컴포넌트를 보여줄 수 있게 한다.

//App.js
<여러개 router들>
<Route path="/cart">
  <Cart></Cart>
</Route>

localhost:3000/cart로 접속하면 이런 화면이 나온다.

데이터를 Redux로 보관하기

npm install redux react-redux
yarn add redus react-redux

redux를 사용하면 props 없이도 모든 하위 컴포넌트들이 같은 값을 공유하게 만들 수 있음(= state 전달하려고 props를 여러번 반복하지 않아도 된다)

1. index.js에 Provider import 하기

import { Provider } from 'react-redux';

2. <Provider>로 <App> 감싸기
   Provider로 감싼 모든 컴포넌트들은 props 없이도 state를 공유할 수 있다.

3. createStore() 함수로 state 만들어주고 Provider로 넘겨주기

//index.js

let store = createStore(()=>{ return [{id: 0, name: '멋진신발', quan: 2}]})

ReactDOM.render(
..
    <Provider store={store}>
      <App />
    </Provider>
    ..
);

4. 저장한 데이터 꺼내쓰기
   store 안에 있는 데이터를 props의 형태로 등록해야 사용가능하다.
   엄밀히 말하면 state를 props로 바로 바꿔서 사용할 수 있게 만드는 것.

우선 Cart.js 맨 밑에 state를 props화 시켜주는 함수를 하나 만든다.
export default도 수정해줌!

//Cart.js

function stateToProps(state){
  return{
    state: state   //자유롭게 작명: state 하면 됨
  }
}

export default connect(stateToProps)(Cart);  
//connect(stateToProps)가 또다른 함수를 리턴하기 때문에 괄호 두개 써야함
//export default Cart;

이제 state를 props로 사용할 수 있으니 props 쓰는 것처럼 Cart(props) 써주고 props.state~ 이렇게 사용하면 된다. 우선 이름을 출력하도록 해보았음

function Cart(props) {
  return (
    <div>
      <Table responsive>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>
        <tr>
          <td>1</td>
          <td>{ props.state[0].name }</td>
          <td></td>
          <td></td>
        </tr>
      </Table>
    </div>
  )
}

데이터 수정하기

map함수를 써서 업데이트 장바구니 품목에 +/- 버튼 만들기

function Cart(props) {
  return (
    <div>
      <Table responsive>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>
        {
          props.state.map((a, i) => {
            return (
            <tr key={i}>
              <td>{a.id}</td>
              <td>{a.name}</td>
              <td>{a.quan}</td>
              <td><button>+</button></td>
            </tr>)

          })
        }

      </Table>
    </div>
  )
}

redux를 쓰는 두번째 이유: state 관리가 용이하다.
reducer() 사용

//index.js
let defaultState = [
  {id: 0, name: '멋진신발', quan: 2},
  {id: 1, name: '멋진신발2', quan: 1}
];  //1. 따로 state변수를 만들고

function reducer(state = defaultState, action){
//2. reducer에 default 파라미터 문법으로 집어넣는다.
//(파라미터 입력 안하면 defaultState가 기본적으로 부여되는 파라미터가 됨)
  return state
}
let store = createStore(reducer);

reducer 안에 데이터 수정방식을 정의해두면 된다.

function reducer(state = defaultState, action){
  if( action.type === '증가'){ 
  //액션.type === 수정방법이름(데이터 수정 조건)
  //'증가'라는 요청이 들어올 경우 어떤 state를 리턴할지 정의함
    let copy = [...state];
    copy[0].quan++;
    return copy
  }
  else{
    return state
  }
  
}

데이터 수정 방법을 정의했으니 이제 HTML에서 버튼을 눌렀을 때
'증가' 데이터 수정 방법을 실행하라고 명령을 줄 수 있다.
이때 dispatch()함수를 이용함

//Cart.js
<td><button onClick={()=>{ props.dispatch({ type: '증가'}) }}>+</button></td>

+ 버튼을 눌렀을 때 수량이 1 증가 된다면 성공!

redux는 다수의 컴포넌트가 존재할 때 특히 유용하다. 만약 state 데이터에 버그가 생긴다면 여러 컴포넌트들을 다 뒤질 필요 없이 그 redux 안의 reducer만 검토하면 됨. (reducer로 데이터를 수정 가능 하므로)
== 상태관리가 용이하다