React useState, useReducer

1. useState

• 단순한 상태 관리에 적합하다.
• 상태를 업데이트하기 위해 새로운 상태값을 직접 설정
• 상태의 형태가 단순(숫자, 문자열, boolean 등)하거나 관리 로직이 복잡하지 않은 경우 사용

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

 

장점

• 간단한 상태를 관리할 수 있다.
• 함수형 업데이트(setState(prev) => newValue)로 이전 상태를 기반으로 업데이트 가능

import React, { useState } from 'react';

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

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

 

2. useReducer

• 복잡한 상태 관리에 적합하다.
• 상태 업데이트를 위해 액션(action), 리듀서(reducer) 함수를 사용한다.
• 상태가 다수의 값으로 구성되거나, 업데이트 로직이 복잡한 경우 사용한다.

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

 

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

 

장점

• 상태와 관련된 로직을 하나의 함수로 분리해 관리 가능
• 상태 업데이트 방식이 명확하며 예측 가능함
• 액션 타입을 기반으로 다양한 상태 업데이트 로직을 처리 가능

import React, { useReducer } from 'react';

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

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

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

 

위와 같이 useReducer는 상태 업데이트 로직이 복잡하거나 여러 타입의 상태를 관리하기에 적합하다.

 

3. useState 와 useReducer의 차이점

특징	useState	useReducer
사용 목적	단순한 상태 관리	복잡한 상태와 로직 관리
상태 업데이트 방식	setState로 새 값을 설정	dispatch로 액션을 전달해 리듀서에서 처리
초기 상태값	단순 값(숫자, 문자열, boolean 등)	객체, 배열 등 복잡한 구조를 포함할 수 있음
로직 처리 위치	컴포넌트 내부	컴포넌트 외부의 리듀서 함수로 분리 가능
코드 가독성	간단하고 짧은 코드를 상태를 관리할 수 있음	상태 관리 로직이 명확히 분리되어 체계적임
유즈 케이스	간단한 카운터, 입력값 관리	상태가 여러 값으로 구성되거나 업데이트가 복잡할 때

 

4. 선택 기준

useState를 사용하는 경우

1. 상태가 단순(숫자, 문자열, boolean)한 경우.
2. 상태 관리 로직이 짧고 간단한 경우.
3. 상태가 독립적으로 작동하며 복잡한 상호작용이 필요 없는 경우.

useReducer를 사용하는 경우

1. 상태가 여러 값으로 구성된 경우 (예: 객체, 배열).
2. 상태 업데이트 로직이 복잡하거나, 여러 조건문을 필요로 하는 경우.
3. 상태 변경이 명확한 액션 타입으로 관리되어야 하는 경우.
4. 컴포넌트가 커지고 상태 관리 코드가 많아질 때 코드 분리가 필요할 경우.

 

5. 결론

• useState는 간단한 상태 관리, useReducer는 복잡한 상태 관리
• 복잡한 로직이 있는 경우에는 useReducer를 사용하여 유지 보수와 가독성이 좋아진다.
• 작은 프로젝트는 useState로, 상태 관리가 복잡해지면 useReducer로 사용하면 좋다.