리액트 Redux 셋팅하기

🔍 Redux란 무엇인가?

장바구니 페이지를 만든다고 가정해보자.

장바구니에 관련된 데이터들을 useState를 사용해서 바인딩 해놓겠지만, 이것들이 장바구니 페이지 뿐만 아니라

다른 컴포넌트들에서도 필요하다면? props를 사용해서 state를 공유할수 있겠지만 컴포넌트가 많을시에는

오류를 범할 수 있는 가능성이 높아진다. 이럴때 필요한것이 Redux 이다.

Redux는 props 없이 state들을 공유할 수 있게 해주는 라이브러리이다.

Redux를 사용하면 하나의 js 파일에 모든 state를 담아낼 수 있는데, 그걸 모든 컴포넌트들이 꺼내 쓸 수 있다.

🔍 Redux 설치하기

npm install @reduxjs/toolkit react-redux

Redux를 설치하려면 pakage.json 안에 있는 react 와 react-dom의 버전이 18.1.x 이상이어야 한다!

🔍 Redux 셋팅하기

1. 상태 관리 할 js 파일에 import 해주기

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

2. index.js 에서 Provider 로 App 감싸주고 import 해오기

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>

);

이렇게 하면 App이라는 부모 컴포넌트와 그 밑에 있는 자식 컴포넌트들은 Store.js 안에 바인딩된 state를 자유롭게 사용 할 수 있게 된다!