Redux 설치 및 세팅
Redux 사용하는 이유
- 컴포넌트가 많을 경우, props drilling 방지
- 불변성 유지
- 모든 컴포넌트에서 state관리
설치
npm install @reduxjs/toolkit react-redux
npm install -D redux-devtools // 크롬브라우저 확장프로그램 연동을 위한 설치
세팅
- store.js / store.tsx 파일 만들기
import { configureStore } from "@reduxjs/toolkit";
export default configureStore({
reducer: {},
});
- index.js / main.tsx 파일 수정
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { Provider } from "react-redux";
import store from "./store.tsx";
ReactDOM.createRoot(document.getElementById("root")!).render(
<Provider store={store}>
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>
);