[React] useState와 useReducer는 뭐가 다르지?

진도장 2025. 1. 15. 16:05

2025. 1. 15. 16:05

React를 다시 공부하면서 state를 관리하는 중요성에 대해서 다시금 깨달았다.

그리고 useState와 useReducer에 대한 개념을 복기하면서 이 둘의 차이에 대한 것을 명확히 짚고 넘어가야겠다고 싶었다.

이 두 훅은 모두 상태를 업데이트하고 컴포넌트 리렌더링을 트리거하는 역할을 하지만 사용목적과 구조적인 차이점이 있다.

useState란?

useState는 React에서 가장 기본적인 상태관리 훅으로 간단한 상태관리를 위해 사용된다.

상태값과 이를 업데이트 하는 함수를 반환한다.

const [state, setState] = useState(initialState);

특징

1. 단순성을 가진다. 간단한 상태를 선언하고 업데이트 할 때 유용하다.

2. 상태 관리 로직이 분리되지 않는다. 상태를 업데이트하는 로직이 컴포넌트 내부에 존재하기 때문이다.

3. setState는 비동기로 작동하며, React는 효율적인 렌더링을 위해 상태 업데이트를 일괄 처리한다.

예제

import React, { useState } from 'react';

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

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

useReducer란?

useReducer는 상태관리 로직이 더 복잡하거나, 여러 상태를 조합해야할 때 사용된다. reducer패턴을 사용하여 상태 업데이트 로직을 컴포넌트 외부로 분리한다.

특징

1. 상태 변경 로직이 복잡하거나 다양한 액션이 필요할 때 유용하다.

2. 상태 업데이트 로직을 한 곳에 집중시켜 가독성과 유지 보수성을 높인다.

3. 상태 업데이트가 동기적으로 실행된다.

예제

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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

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

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

useState와 useReducer의 주요 차이점 표정리

특징	useState	useReducer
복잡성	간단한 상태 관리에 적합	복잡한 상태와 상태 전환 로직 관리에 적합
상태 업데이트 방식	업데이트 로직이 컴포넌트 내부에 위치	Reducer 함수로 상태 업데이트 로직을 분리
사용 사례	단순한 상태(숫자, 문자열, boolean 등)	여러 상태를 조합하거나 다양한 액션이 필요한 경우
상태 초기화	초기 상태 값을 간단히 설정 가능	초기 상태와 Reducer 함수가 필요
상태 업데이트 함수 이름	setState	dispatch
코드 가독성	간단한 상태에는 더 직관적	복잡한 상태 관리에 더 체계적

DJ pupm this party