useState vs useReducer 차이점은? 상태관리 기초 개념과 예제로 쉽게 정리하기

 

 

React에서 컴포넌트 상태를 다룰 땐 대부분 useState를 사용합니다.
그런데 상태가 복잡해지면 useReducer가 더 유리할 때가 있어요.

이번 글에서는 useState와 useReducer가 어떨 때 어떤 차이점이 있는지,
그리고 언제 어떤 걸 써야 하는지 예제를 통해 비교해보겠습니다.

---

 

✅ useState란?

• 가장 기본적인 상태관리 훅
• 변수 1~2개, 간단한 숫자나 문자열 상태에 적합

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

 

---

 

✅ useReducer란?

• 상태 업데이트 로직이 복잡할 때 사용
• 여러 상태를 하나의 로직으로 관리 가능
• reducer 함수와 dispatch를 함께 사용

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

 

---

 

1️⃣ 기본 예제: 카운터

 

✔️ useState 버전

import { useState } from 'react';

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

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
    </>
  );
}

 

---

 

✔️ useReducer 버전

 

import { useReducer } from 'react';

const initialState = 0;

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
}

function Counter() {
  const [count, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
    </>
  );
}

 

---

 

2️⃣ 어떤 경우에 useReducer가 유리할까?

상황	추천 훅
간단한 숫자/문자열 상태	useState
상태가 여러 개일 때	useReducer
상태 변경 로직이 복잡할 때	useReducer
상태 변화에 조건/타입 분기가 많을 때	useReducer
외부 상태 관리 라이브러리와 연동할 때	useReducer 기반으로 익숙해지기 좋음

 

---

 

3️⃣ 실제 예: 폼 입력 상태 관리

 

useState로 각각 관리하면 다음과 같이 됩니다:

const [name, setName] = useState('');
const [email, setEmail] = useState('');

 

→ 필드가 많아질수록 setState가 복잡해짐

 

useReducer를 쓰면:

const initialState = { name: '', email: '' };

function reducer(state, action) {
  return { ...state, [action.name]: action.value };
}

 

→ 하나의 dispatch로 모든 input 상태를 처리 가능

 

---

 

✅ 정리하며

기준	useState	useReducer
간단한 상태	O	△
복잡한 상태	△	O
상태 변화 로직	간단한 업데이트	switch 분기
가독성	높음	복잡하지만 정리됨

 

결론:

• 간단하면 useState
• 복잡해지면 useReducer
  를 쓰는 것이 가장 효율적입니다!