React useReducer Hook 사용하기

Numble의 챌린지를 하면서 useReducer Hook을 사용하게 되었다.

공식문서의 내용을 간단하게 정리하고 내가 실제로 구현한 예시 코드를 정리하려고 한다.

useReducer?

useReducer는 useState의 대체 함수이다.
(state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환한다.
redux의 reducer를 하나의 컴포넌트에서 사용한다고 생각하면 된다.

장점

useReducer는 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 useState대신 사용하면 좋다.

또한 useReducer는 콜백 대신 dispatch를 전달 하여 자세한 업데이트를 트리거 하는 컴포넌트의 성능을 최적화할 수 있게 한다.

또한 useMemo와 lazy initial state가 가능하다.

예시

reducer.ts에 reducer를 작성해주었다.

const reducer = (state: GameType, action: Action): GameType => {
  const { actionType } = action;

  switch (actionType) {
    case DECREASE_TIME_ACTION:
      return decreaseTime(state);

    case CORRECT_ANSWER_ACTION:
      return nextStage(state);

    case WRONG_ANSWER_ACTION:
      return wrongAnswerPenalty(state);

    case RESET_GAME_ACTION:
      return initialState;
    default:
      return state;
  }
};

그 후 export하고 컴포넌트에서 다음과 같이 호출하여 사용할 수 있다.

const [gameState, dispatch] = useReducer(reducer, initialState);

ref

리액트 공식문서