웹 페이지가 커질수록 props는 많아지고, 많아질 수록 state를 공유하기 복잡해진다.
Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리다.
Redux를 설치하면 js 파일 하나에 state들을 보관할 수 있다.
그 state들을 모든 컴포넌트가 직접 꺼낼 쓸 수 있게 된다.
따라서, 귀찮은 props 전송이 필요 없어진다는 것!!
npm install @reduxjs/toolkit react-redux
redux toolkit이라는 라이브러리도 같이 설치해준다.
redux의 개선 버전이라고 보면 되는데 redux toolkit을 사용하면 문법이 좀 더 쉬워진다.
반드시 package.json 에서 "react" 와 "react-dom"의 버전이 모두 18.1.x 이상인지 확인한다. 해당 버전 이상에서만 사용 가능하다.
state들을 보관할 파일 하나를 생성한다.
나는 store.js 로 만들었다.
해당 파일에 다음과 같이 추가한다.
import { configureStore } from '@reduxjs/toolkit'
export default configureStore({
reducer: { }
})
Provider 라는 컴포넌트와 이전에 만든 store.js를 import 해준다.
그리고, Provider 태그 속성으로 store={import 해온 이름}을 넣어주고 App 태그를 감싸주면 된다.
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를 맘대로 꺼내 쓸 수 있다!!