쓰는 이유

코딩애플-리액트코드짜는 법
이 영상을 보는 순간 왜 Redux를 사용해야 하는지 알 수 있다!ㅋㅋㅋ

깊은 하위컴포넌트들도 props 여러번 전송없이 state를 직접 갖다쓸 수 있음.

사용법

설치

터미널에서 npm install redux redux-react 설치

준비

index.js
1. import { Provider } from 'react-redux';
2. Provider로 App 감싸기

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider>
        <App/>
      </Provider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

3. createStore()안에 state 저장
   import { createStore } from 'redux'; 추가
   let store = createStore(()=>{return [{ id : 0, name : '멋진신발', quan : 2 }];});
   (retur문에 있는 것이 초기값)
   
4. Provider에 props전송

  <Provider store={ store }>
    <App/>
  </Provider>

5.안의 모든 컴포넌트는 store안에 저장되어있는 데이터를 공유할 수 있게된다.

index.js

  
import { Provider } from 'react-redux';
import { createStore } from 'redux';

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


ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={ store }>
        <App/>
      </Provider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
); 

사용

6. 컴포넌트에서 store에 있는 state를 쓰려면
   • function 만들기
     (redux store데이터를 가져와서 props로 변환해주는 함수)
   • export default connect()()
   • import { connect } from 'react-redux';해주기
   • 컴포넌트 파라미터에 props 넣어주기

Cart.js

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

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


function state를props화(state){
return {
  state : state
//props라는 객체안의 state라는 이름의 key에 index.js에서 선언했던 store데이터를 할당해주는 의미이다.
}
}

export default connect(state를props화)(Cart);