리액트 redux 설치, 사용법

• 설치

$yarn add redux react-redux

• index.js 세팅하기

1) import Provider 하기

2) 로 감싸기

3) createStore() 안에 state저장

4) 에 props 전송

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")
);

Cart.js 컴포넌트에서 store에 있는 state쓰려면

1) function을 만든다.

2) export default connect()()를 한다.

3) connect를 import한다.

import { connect } from "react-redux";
~~~~~~~

//맨 아래부분
function 함수명(state){
    return {
       statae : state
    }
}
export default connect(함수명)(Cart)

4) 컴포넌트(props) 입력후 props.state와 같은 방식으로 state를 꺼내 쓴다.

redux 쓰는 이유

1 . props 없이 모든 컴포넌트가 state를 가져다 쓰는 것이 가능하다.

깊은 하위컴포넌트들도 props를 여러번 전송하지 않고 state를 직접 가져다 쓸 수 있다.