redux 사용이유 1 (복잡한 props 사용하지 않아도됌)

 

redux는 상위 컴퍼넌트에서 createStore로 하위컴퍼넌트들이 같은 값을 공유하게 만들수 있는 라이브러리

(Context API와 유사)

사용방법

1.react-redux, redux를 npm install 받은후 

하단처럼 전달받을 하위 컴퍼넌트들에 묶고 데이터 전송

//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")
);
[..]

하위 컴퍼넌트에 전달, 해당 적용 export default connect로 변경

//*********App.js
[...]
        <Route path="/cart">
          <Cart></Cart>
        </Route>
      </Switch>
[...]


//***********Cart.js

import React from "react";
import { Table } from "react-bootstrap";
import { connect } from "react-redux";
function Cart(props) {
  return (
    <div>
      <Table striped bordered hover size="sm">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>{props.state[0].name}</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}
function state를props화(state) {
  return {
    state: state, //state라는 이름의 props로 바꿔주세요
  };
}
export default connect(state를props화)(Cart);

// export default Cart;