[React]리엑트 살펴보기6: useReducer 사용 방법

useReducer는 useState처럼 함수 컴포넌트에서 상태관리를 위해 사용하는 훅이다. 하지만, 다양한 숫자의 state를 관리할 때 이점이 있다. 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시키고 별도의 파일에서 관리하기가 좋다.

1. 문법

function reducer(state: any, action: any) {
  switch (action.type) {
    case "INCREAMENT":
      return state + action.payload;
    case "DECREAMENT":
      return state - action.payload;

    default:
      return state;
  }
}
function App() {
  // const [number, setNumber] = useState(0);

  const [number, dispatch] = useReducer(reducer, 0);

  const onIncrease = () => {
    // setNumber((prevNumber) => prevNumber + 1);
    dispatch({ type: "INCREAMENT", payload: 1 });
  };

  const onDecrease = () => {
    dispatch({ type: "DECREAMENT", payload: 1 });
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

• useReducer의 반환 값 중 첫 번째는 state다.
• 두 번째 반환 값은 dispatch라고 하는데, setter 함수의 역할을 한다.
• useReducer의 인자 중 두번째는 초기 state다.
• 첫 번째 인자는 reducer 함수다.
• 작동원리는 dispatch를 호출하면 reducer 함수에 현재state와 dispatch의 인자가 들어가서 실행된다. 여기서 정해진 로직 규칙은 없으나, 일반적으로 action.type 속성으로 로직을 스위칭하고 state 변경 작업을 처리한다.

 

 

5. useReducer vs useState

• 관리할 state가 몇개 되지 않는다면 useState가 편리하다.
• state의 갯수가 많아지고 setter 함수와 그 로직이 증가한다면, 이들의 일괄적인 관리를 위해서 useReducer가 편리하다.