[React] Redux Toolkit 설치

Redux를 사용하면

Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리

 

모든 컴포넌트가 props 없이 컴포넌트를 직접 쓸 수 있다. 

state 변경 관리할 때 쓸 수 있다.

 

Redux 설치 방법

 

 package.json 파일을 열어서 

"react", "react-dom" 버전을 확인해서

18.1.0 이상인지 확인 후 

 

 

터미널에서 npm install @reduxjs/toolkit react-redux 입력

 

 

Redux 셋팅

store.js 파일을 만들어서 다음과 같이 넣어준다. 

import { configureStore } from '@reduxjs/toolkit';

export default configureStore({
    reducer:{}
})

 

store.js가 state들을 보관하는 파일 

index.js 가서 store.js를 import 해준다.

그 후  <Provider store={ store }>로 전체를 감싼다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from "react-redux";
import store from './store';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

---

그렇게 하면?

 <App>과 그 모든 자식컴포넌트들은 store.js에 있던 state를 사용 가능!