React) Redux 01_셋팅하기

Redux

component끼리는 서로의 state를 공유할 수 없다.
하지만 예외로 자식component는 props를 통해 부모component의 state로 접근할 수 있다. 하지만 바로 직계자식에게만 전달해줄 수 있어 component의 구조가 여러번 중첩된다면..?
부모>자식>자식의 자식>그 자식의 자식...
이런식으로 몇번이나 props로 전달해야하는 불상사가 생겨버린다.

이러한 배경에서 Redux라는 라이브러리가 탄생했다.

Redux안에서는 하나의 store.js라는 일종의 창고 개념의 파일을 만들어
모든 component간 공유가 가능토록한다.

설치

1. terminal

npm install @reduxjs/toolkit react-redux

react, react-dom의 버전이 18.1.0 이상이여야 사용가능하다.

2. src/store.js생성

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

store.js 파일을 만들고 위의 탬플릿을 그대로 적용.

3. index.js

import { Provider } from "react-redux";
import store from './store.js'

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

Provider store={store}로 <App/>을 감싸주고 props의 형태로 store.js에서 받은 정보를 store변수에 담아 지정한다.
이렇게해서, <App>와 그 안의 모든 자식 컴포넌트는 store.js에 있던 state를 마음대로 사용할 수 있게 된다.