useReducer

useReducer 훅은 컴포넌트 내부에 새로운 State를 생성하는 조금 특별한 리액트 훅이다.

• 상태 변화 함수 대신 “상태 변화 요청 함수” 를 사용한다.
  • useState와 달리 “상태 관리 코드”(이벤트 핸들러로 쓰거나 했던 setState 함수를 사용하는 함수들)를 컴포넌트 외부로 분리할 수 있다.

모든 useState는 useReducer 로 대체 가능하다.

• 컴포넌트는 렌더링하기 위한 함수인데, 컴포넌트가 내부적으로 "도메인 로직"을 갖게 되면 책임 분리가 잘 안되게 된다.
• 즉, State를 관리하는 코드가 컴포넌트 안에 길어지는 상황을 막기 위해 사용한다.

즉, useReducer는 다음과 같은 경우에 사용한다.

• 컴포넌트 내부에 보관해야 하는 상태가 도메인 로직과 밀접한 상태일 때
• 컴포넌트 내부에 보관해야 하는 상태가 자체적인 불변식을 가지고 있을 때

도메인 로직/불변식과 같은 객체지향 개념에 대해 아직 잘 모르신다면, 다음 글들을 추천드립니다.

2025.03.11 - [Article - 깊게 탐구하기/도메인 주도 설계 이해하기] - 도메인 주도 설계(DDD)

도메인 주도 설계(DDD)

2025.05.26 - [Article - 깊게 탐구하기/도메인 주도 설계 이해하기] - [객체지향 패러다임] OOD와 GRASP 패턴, 웹 개발에서의 객체지향 적용

[객체지향 패러다임] OOD와 GRASP 패턴, 웹 개발에서의 객체지향 적용

 

useReducer 호출 방법

const [state, dispatch] = useReducer(상태변화 함수, 초기값);
// dispatch 함수 호출 시 함수 안에서 매개변수로 지정한 상태변화 함수를 호출함.

dispatch 함수 사용법

• 매개변수로 객체를 받는다.
• 해당 객체를 action 객체라고 지정한다.

const onClickPlus = () => {
  // 인수: 상태가 어떻게 변화되길 원하는지
  // -> 액션 객체
  dispatch({
    type: "INCREASE",
    data: 1,
  });
};
const onClickMinus = () => {
  dispatch({
    type: "DECREASE",
    data: 1,
  });
};

• 액션 객체는 인자로 지정한 상태변화 함수의 매개변수로 들어가게 된다.useReducer 상태변화 함수 선언 방법

// reducer : 변환기
// -> 상태를 실제로 변화시키는 변환기 역할
function reducer(state, action) {
  switch (action.type) {
    case "INCREASE":
      return state + action.data;
    case "DECREASE":
      return state - action.data;
    default:
      return state;
  }
}