React : state 공유하는 "Redux" (설치)

컴포넌트간에 state 전송 없이도 Redux를 사용하면 state를 공유할 수 있다.
js파일을 하나 만들어서 state를 몰아넣는 식이다.

---

Redux

설치 전 확인사항

{
  ...
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  ...
}

package.json 파일에서 reat/react-dom 버전이 18.1버전 이상인지 확인하자.

---

설치하는 법

터미널 설치

npm install @reduxjs/toolkit react-redux

store.js 파일생성

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

src폴더에 store.js 파일을 생성해 위 코드를 넣어줬다.

index.js에서 받아오기

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

root.render(
  <React.StrictMode>
    <Provider store={store}> <!-- 이거 -->
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

1. index.js 상단에 Provider와 store를 import했다.
2. <App />을 Provider로 감싸주었다.
3. Provider에 store={store}를 이식해주었다.

---

출처 : 코딩애플 https://codingapple.com/