React 상태 관리: useState vs useReducer

React의 상태 관리 방법 중 useState와 useReducer는 각각 간단한 상태 관리와 복잡한 상태 로직을 처리하는 데 적합하다.

---

useState

useState는 컴포넌트 내부에서 상태를 관리할 때 사용하는 React의 기본적인 훅이다.

사용법

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

특징

• 상태 값을 직접 변경하는 setState 함수 제공

• 상태가 변경되면 컴포넌트가 리렌더링됨

• 간단한 상태(숫자, 문자열, 불리언 등)를 관리할 때 적합

useReducer

useReducer는 useState보다 복잡한 상태 관리가 필요할 때 사용한다. 상태 변경 로직을 함수(reducer)로 분리하여 명확하게 관리할 수 있다.

사용법

import { useReducer } from "react";

// 상태 변경 로직을 정의하는 reducer 함수
function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return { count: 0 };
    default:
      throw new Error("Unknown action type");
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>현재 카운트: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>증가</button>
      <button onClick={() => dispatch({ type: "decrement" })}>감소</button>
      <button onClick={() => dispatch({ type: "reset" })}>초기화</button>
    </div>
  );
}

특징

• dispatch 함수를 사용해 액션을 발생시키고, reducer 함수에서 상태를 변경

• useState보다 복잡한 상태(여러 값이 포함된 객체, 배열 등)를 효율적으로 관리할 때 유리

• 상태 변경 로직을 컴포넌트 외부로 분리하여 코드의 가독성과 유지보수성을 높일 수 있음

• Redux와 유사한 방식으로 동작

useState vs useReducer 선택 기준

비교 항목	useState	useReducer
사용 용도	단순한 상태 관리	복잡한 상태 관리
상태 형태	단일 값(숫자, 문자열 등)	여러 개의 상태를 포함하는 객체 또는 배열
상태 변경 방식	setState로 직접 값 설정	dispatch를 통한 액션 기반 변경
코드 구조	간단하고 직관적	상태 변경 로직을 별도 함수로 분리 가능
유지보수성	상태가 많아지면 관리 어려움	상태 변경이 많을수록 가독성 증가

useState

• 간단한 상태(숫자, 문자열, 불리언 등)를 다룰 때

• 상태 변경 로직이 단순할 때

useReducer

• 상태가 객체 형태로 복잡한 구조를 가질 때

• 여러 개의 상태를 함께 관리해야 할 때

• 상태 변경 로직을 분리하여 재사용성을 높이고 싶을 때