React.js - useReducer 소개

useReducer 소개

// Exam.jsx
import { useReducer } from "react";

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

const Exam = () => {
  // dispatch : 발송하다, 급송하다
  // -> 상태 변화가 있어야 한다는 사실을 알리는, 발송하는 함수
  const [state, dispatch] = useReducer(reducer, 0);

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

  const onClickMinus = () => {
    dispatch({
      type: "DECREASE",
      data: 1,
    });
  };

  return (
    <div>
      <h1>{state}</h1>
      <button onClick={onClickPlus}>+</button>
      <button onClick={onClickMinus}>-</button>
    </div>
  );
};

export default Exam;

 

 useReducer란 useState랑 비슷하지만, 상태 관리 코드를 컴포넌트 외부로 분리할 수가 있다. dispatch 함수가 실행되면, 함수의 인수 첫 번째 자리에 았는 reducer 함수가 실행된다. 이 reducer 함수가 상태 변화를 일으키며, 이는 컴포넌트 외부에 있다. dispatch 함수에서 넘긴 액션 객체를 action과 state 값을 이용해 상태를 변화시킨다.

 그렇다면 언제 useReducer을 사용할까? 배열 안에 객체가 들어가는 등의 복잡한 구조는 useReducer을, 카운터 앱같이 간단한 상태 변화는 useState을 주로 이용한다.