Redux 설치 및 세팅

Redux 사용하는 이유

• 컴포넌트가 많을 경우, props drilling 방지
• 불변성 유지
• 모든 컴포넌트에서 state관리

설치

npm install @reduxjs/toolkit react-redux 
npm install -D redux-devtools //  크롬브라우저 확장프로그램 연동을 위한 설치

세팅

1. store.js / store.tsx 파일 만들기

// store 파일
import { configureStore } from "@reduxjs/toolkit";

export default configureStore({
  reducer: {},
});

2. 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}> // Provider에 store 사용이 가능하게 추가
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>
);