React에서 useState와 useReducer 비교하기

 

React에서는 상태 관리를 위해 useState와 useReducer를 제공합니다. 이 두 훅은 상태를 업데이트하고 관리하는 데 사용되지만, 각각의 사용 사례와 적합한 상황이 다릅니다. 이번 글에서는 useState와 useReducer의 차이점과 사용 방법을 비교하며, 언제 어떤 것을 사용하는 것이 더 적합한지 알아보겠습니다.

---

1. useState란?

useState는 React에서 가장 기본적인 상태 관리 훅입니다. 컴포넌트의 간단한 상태를 관리하기에 적합하며, 상태를 초기화하고 업데이트할 수 있는 배열을 반환합니다.

사용 예시:

import React, { useState } from 'react';

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

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

export default Counter;

위 코드에서 count는 상태이며, setCount를 통해 상태를 업데이트할 수 있습니다.

특징:

• 간단한 상태 관리에 적합
• 상태 업데이트 로직이 비교적 단순
• 상태 변경 함수는 항상 최신 상태 값을 기반으로 동작

---

2. useReducer란?

useReducer는 복잡한 상태 관리 로직을 다룰 때 유용한 훅입니다. 상태와 상태 업데이트 로직을 분리하여 보다 구조적으로 상태를 관리할 수 있습니다.

사용 예시:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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

const 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>
  );
};

export default Counter;

위 코드에서 reducer 함수는 상태 변경 로직을 정의하며, dispatch를 통해 액션을 전달받아 상태를 업데이트합니다.

특징:

• 복잡한 상태 관리 로직에 적합
• 상태와 로직을 분리하여 코드 가독성 향상
• 여러 상태가 서로 의존적인 경우 유용

---

3. useState와 useReducer의 비교

특징useStateuseReducer

복잡도	단순한 상태 관리에 적합	복잡한 상태 로직 관리에 적합
업데이트 방식	상태 업데이트 함수 사용	액션과 리듀서 함수 사용
코드 가독성	상태가 적을 때 더 간단하고 직관적임	로직이 복잡할수록 가독성이 높아짐
사용 사례	입력 필드, 토글 상태 등 간단한 상태	여러 상태가 연결된 로직, 복잡한 업데이트

---

4. 언제 무엇을 사용할까?

1. useState를 사용하는 경우:
   • 상태가 단순하고 독립적인 경우
   • 상태 변경 로직이 직관적이고 간단한 경우
   • 예: 입력 필드 값, Boolean 상태 관리 (예: 모달 열림/닫힘)
2. useReducer를 사용하는 경우:
   • 상태가 복잡하거나 서로 관련된 여러 상태를 관리해야 하는 경우
   • 상태 변경 로직이 복잡한 경우
   • 예: 쇼핑 카트 관리, 폼 상태 관리

---

5. 정리

React에서 useState와 useReducer는 각각의 장점과 적합한 사용 사례를 가진 훌륭한 상태 관리 도구입니다. 간단한 상태 관리에는 useState를, 복잡하고 구조화된 상태 관리에는 useReducer를 사용하는 것이 권장됩니다. 애플리케이션의 요구사항에 따라 적절한 도구를 선택하여 효율적인 상태 관리를 구현해 보세요!