React useReducer

useReducer 이해하기

useReducer는 useState와 같은 상태 관리, 상태 업데이트 훅이다 변경할 값이 많을 때 즉 상태 관리할 데이터가 많을경우 유용하게 사용할 수 있다

useReducer와 useState의 차이를 알기위해선 아래 코드를 확인해보자

import { useState } from "react";

function TestComp() {
  const [count, setCount] = useState(0);
  const onIncrease = () => {
    setCount(count + 1);
  };

  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h4> 테스트 컴포넌트 </h4>
      <div>
        <bold>{count}</bold>
      </div>
      <div>
        <button onClick={onIncrease}>+1</button>
        <button onClick={onDecrease}>-1</button>
      </div>
    </div>
  );
}

export default TestComp;

먼저 위와 같이 +1 과 -1버튼으로 특정 변수의 값을 바꾸는 컴포넌트를 하나 생성하였다 여기서 상태변화코드를 이해해야하는데 상태변화코드란 useState같이 상태데이터에 내용을 업데이트 즉 변경하게 만드는 코드를 상태변화코드라고 한다 그럼 위에서 onIncrease함수와 onDecrease함수가 상태변화코드가 되겠다. 그럼 만약에 onIncrease함수와 onDecrease함수를 다른 컴포넌트에서 관리하고 싶으면 어떻게해야 할까? useState를 이용해서 State를 생성하였다면 상태변화코드는 반드시 같은 컴포넌트 안에 작성해야 한다. 하지만 useReducer를 사용한다면 상태변화코드를 컴포넌트 밖으로 분리가 가능해진다.

<왜 상태변화코드를 밖에서 관리하나요?>
상태변화코드를 분리하는 이유는
하나의 컴포넌트에 모든 상태 변화 코드가 있으면 유지보수가 어려워지는 큰 단점이 존재하게된다
또한 가독성을 해치기 때문에 코드의 최적화를 위해 상태변화코드를 분리해주는것이 좋다

---

useReducer를 사용하는 방법

useState코드를 삭제하고 아래 코드와 같이 useReducer로 변경해본다

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "INCREASE":
      return state + action.data;
    case "DECREASE":
      return state - action.data;

    case "INIT":
      return 0;
    default:
      return state;
  }
}
function TestComp() {
  const [count, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <h4> 테스트 컴포넌트 </h4>
      <div>
        <bold>{count}</bold>
      </div>
      <div>
        <button onClick={() => dispatch({ type: "INCREASE", data: 1 })}>
          +1
        </button>
        <button onClick={() => dispatch({ type: "DECREASE", data: 1 })}>
          -1
        </button>
        <button onClick={() => dispatch({ type: "INIT", data: 0 })}>
          초기화
        </button>
      </div>
    </div>
  );
}

export default TestComp;

• (1) 먼저 useReducer를 react로부터 불러온다
• (2) 함수 reducer를 만들고 reducer에는 2개의 매개변수를 갖는다, 첫 번째 매개변수 state에는 현재 State의 값이 저장되며 두 번째 매개변수 action에는 함수 dispatch를 호출하면서 인수로 전달한 action 객체가 저장된다
• (3) reducer가 반환하는 값은 새로운 State 값이 되며 action 객체의 type이 INCREASE면 기존 State 값에 action 객체의 data값을 더해 반환한다.

실무에서도 관리대상 상태 데이터가 적은 경우에는 useState를 사용하여 구현하지만 많은 경우에는 useReducer를 사용하여 구현한다