React Redux 파해치기

Redux 개발환경 셋팅하기

Redux 사용이유

• 우리가 사용하려는 컴포넌트가 매우 깊숙히 있다면 state를 전달하려고 props 100번 써야할 상황이 올수있습니다. 그러나! redux를 셋팅해준다면 props를 100번 쓸 필요 없이 바로 꺼내 쓸수 있습니다.
  (Context 문법과 매우 비슷해요 : )

1. 라는걸 import하기
2. 내가 state값 공유를 원하는 컴포넌트를 다 감싸기
3. redux에서 state를 만들기 위해 createStore()함수 사용
4. 에 만든 state를 props처럼 등록하기
   이렇게 store를 등록하면이제 Provider로 감싼 컴포넌트는 전부 store안에 있던 값을 props없이 공유 가능합니다.

import {Provider} from 'react-redux';
  
let store = createStore(reducer);


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

store안에 있던 state 사용은 원하는 컴포넌트 파일 가셔서

1. 하단에 function state를props화() 를 하나 만들어주고 state를 props로 등록합니다.

2. 그리고 또 하단에 export default connect(state를props화)(Cart);

이렇게 사용하시면 이제 아까 만들어둔 state가 props로 등록이 된 것입니다.

props.state이름 이렇게 저장된 state를 자유롭게 사용할 수 있습니다.