1. useSelector, Provider

리덕스
  -자바스크립트의 state를 관리하는 라이브러리
  -React, Angular, Vue.js 등 자바스크립트 어디에서는 사용 가능
  -state를 mutate(변형)하지 않고 새로운 object를 리턴해야 한다
    ex) store.push() = X
          [return [...state, {type : "ADD"}] = O

>> npm install react-redux //리액트 리덕스 설치

 

redux - <count.js>

  ※store : data가 저장되는 state

  ※createStore() : store를 생성하는 함수
  ※reducer : data를 수정(modify)하는 함수

  ※ action : reducer에게 명령을 내리는 매개변수

      -type : 명령 이름 지정

  (count -> state, countStore -> store, countModify -> reducer)

import { createStore } from "redux";

const countModify = (count = 0, action) => { //state 값을 0으로 지정
  switch (action.type) {
    case "ADD": //count 증가
      return count + 1;
    case "MINUS": //count 감소
      return count - 1;
    default:
      return count;
  }
};

const countStore = createStore(countModify); //store 생성

export default countStore;

 

page - <reduxCount.js>

  ※useSelector : react-redux store의 state 데이터를 가지고 옴

import React from "react";
import { useSelector } from "react-redux";

function ReduxCount() {
  const count = useSelector((state) => state);

  return (
    <div>
      <button>증가</button>
      <span> 카운트 : {count} </span>
      <button>감소</button>
    </div>
  );
}

export default ReduxCount;

 

<App.js>

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import ReduxCount from "./page/reduxCount";

function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route index element={<ReduxCount />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

 

<index.js>

  ※Provider : 다른 컴포넌트에서 Redux store를 사용할 수 있게 해줌

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import countStore from "./redux/count";

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