[React] useReducer

🕹️ useReducer

컴포넌트 내부에서 새로운 상태를 생성하고 관리하는 훅
모든 useState는 useReducer로 대체할 수 있지만, 일반적으로 복잡한 상태 관리에 적합하다.

📍 useState와의 차이점

• useState는 간단한 상태에 적합하다.
• useReducer는 상태 변경 로직을 컴포넌트 외부로 분리할 수 있어 복잡한 상태 로직을 보다 명확하게 구성할 수 있다.

1️⃣ useState 사용 예시

function App() {
  const [todos, setTodos] = useState(mockData);
  const idRef = useRef(3);

  const onCreate = (content) => {
    const newTodo = {
      id: idRef.current++,
      isDone: false,
      content: content,
      date: new Date().getTime(),
    };

    setTodos([newTodo, ...todos]);
  };
}

• 컴포넌트 내부에 상태 변경 로직이 존재한다.

2️⃣ useReducer 사용 예시

function reducer(state, action) {
  // ...
}

function App() {
  const [todos, dispatch] = useReducer(reducer, []);

  // ...
}

• reducer 함수를 외부로 분리함으로써 상태 로직을 구조화할 수 있다.

📍 useReducer 기본 예제

import { useReducer } from "react";

// reducer : 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수
function reducer(state, action) {
  console.log(state, action); // 0 {type: 'INCREASE', data: 1}

  // if (action.type === "INCREASE") {
  //   return state + action.data;
  // } else if (action.type === "DECREASE") {
  //   return state - action.data;
  // }

  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); // 초기값 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;

• const [state, dispatch] = useReducer(reducer 함수, 초기값);
• reducer는 state와 action을 받아 새 상태를 반환하는 순수 함수여야 한다.
• dispatch는 상태 변경을 요청하는 역할을 하며, action 객체는 type과 필요 시 payload(data)를 포함한다.
• ✨ 복잡한 상태 구조나 다양한 액션이 필요한 경우 useReducer가 더 명확하고 유지보수가 쉬운 코드를 만드는데 도움이 된다.
• 단순한 boolean, 숫자 등 간단한 상태는 여전히 useState로 처리하는 것이 간결하다.