[Redux] Redux란? 기본 개념

jiyaho·2022년 9월 23일
0

Redux

목록 보기
1/1

✅ Redux란?

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

🔸 Redux 쓰는 이유?

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

0개의 댓글