[Redux] Redux란? 기본 개념 / React-redux

✅ Redux란?

React의 사용을 편리하게 도와주는 일종의 도구로, 상태 관리 라이브러리라고 불리운다.

🔸 Redux 쓰는 이유?

1. Redux의 기능을 통해 React에서의 모든 component를 props 문법의 사용없이 state(사용자 지정 변수)를 직접 꺼낼 수 있다.
2. 상태 관리가 용이하다. 즉, state관리가 용이 하다는 것인데 component에서 특정 state를 부분적으로 수정해서 쓰고싶을 때, redux는 해당 state의 수정 방법 등을 정해놓는다. 그리고 redux에서 정한 수정규칙에 따라 component는 redux에 수정 요청을 하여 받아와 쓸 수 있다. 따라서 state의 수정 과정에서 생겨나는 오류와 버그들을 찾기위해 component마다 검토할 필요 없고, redux만 확인하면 되기때문에 상태 관리에 용이하다고 할 수 있는 것이다.

---

🔶 Redux with React

• Connect: Components를 Store에 연결시켜 주는 함수.
  • Connect는 2개의 Argument를 가짐.
    • connect(mapStateToProps, mapDispatchToProps)(연결할 Components)
      • mapStateToProps(state, ownProps?)
      • mapDispatchToProps(dispatch, ownProps?)
• But, 최근의 Redux는 Connect와 mapStateToProps, mapDispatchToProps를 사용하지 않는 추세임. 대신 React-Redux에서, React의 Hook처럼 useSelector와 useDispatch를 사용함.
  • useSelector: 현재의 State를 받아오는데 사용한다. Connect를 사용하지 않고 State를 조회할 수 있는 것. Redux-JS에서의 getState()와 같은 역할을 함.
  • useDispatch: 생성한 Action을 useDispatch를 통해 발생시킬 수 있음.

---

🔸 react-redux 예제 코드

• 먼저 reduxState.js 파일에 age라는 변수를 1씩 증가시키거나 감소시킬 수 있는 reducer함수를 담아두었다.

// reduxState.js

import { provider } from "react-redux";
import { createStore } from "redux";

const age = 20;

function reducer(state = age, action) {
  if (action.type === "plus") {
    state++;
    return state;
  } else if (action.type === "minus") {
    state--;
    return state;
  } else {
    return state;
  }
}

let store = createStore(reducer);

• 그리고 App.js 파일에서는 useDispatch와 useSelector를 사용해서 reduxState.js에서 만들어둔 state와 state수정 규칙을 따라 해당 파일에서 불러와 동작시킬 수 있다.
• 다음과 같이 age를 증가 혹은 감소시킬 수 있는 Plus Button과 Minus Button을 만들었다.

// App.js

import { useDispatch, useSelector } from "react-redux";

function App() {
  const age = useSelector((state) => state); // age: redux에서 가져온 state
  const dispatch = useDispatch();

  return (
    <div>
      <p>age: {age}</p>
      <button
        onClick={() => {
          dispatch({ type: "plus" });
        }}
      >
        Plus
      </button>
      <button
        onClick={() => {
          dispatch({ type: "minus" });
        }}
      >
        Minus
      </button>
    </div>
  );
}

export default App;