Redux_1

Redux 설치 방법

redux toolkit이라는 라이브러리(redux의 개선버전)

npm install @reduxjs/toolkit react-redux

yarn add @reduxjs/toolkit react-redux

주의사항

설치하기 전에 package.json 파일을 열어서 "react", "react-dom" 버전 확인 필요 이것들이 18.1.x 이상이면 사용가능
버전이 이전 버전이라면 직접 두개를 18.1.0 이렇게 수정한 다음 파일저장하고 터미널에서 npm install 혹은 yarn install 치면 Redux 설치 가능해집니다.

Redux 세팅

폴더구조
주로 저는

새로운 폴더를 하나 만들어서 그 안에 store.js라는 파일을 만들어서 그 안에서 관리를 합니다.

파일을 생성했다면
store.js 안에다가

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

위의 코드를 작성해줍니다!
이것이 바로 state들을 보관하는 파일입니다.

그리고 index.js로가서 Provider 라는 컴포넌트와 store.js를 import 해옵니다.
그리고 Provider store={store}로 을 감싸주면 됩니다.
그럼 이제 App.js와 그 모든 자식컴포넌트들은 store.js에 있던 state를 사용할 수 있습니다.

import React from 'react';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './service/store';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>,
);

<참조> 코딩애플