React에서 상태 관리: useState vs useReducer

 

React에서 컴포넌트의 상태를 관리할 때 가장 많이 사용되는 훅은 useState와 useReducer입니다. 이 둘은 각각의 장점과 사용 목적이 다르기 때문에 상황에 맞게 선택하는 것이 중요합니다.

1. useState란?

useState는 함수형 컴포넌트에서 상태를 선언하고 사용할 수 있도록 해주는 React Hook입니다. 간단한 상태나 값이 하나인 경우에 주로 사용됩니다.

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

버튼 클릭 등 단순한 이벤트 처리에 적합하며, 직관적이고 사용하기 쉬운 것이 큰 장점입니다.

2. useReducer란?

useReducer는 복잡한 상태 로직이 필요한 경우 사용합니다. 상태가 여러 값으로 구성되어 있거나, 상태 변경 방식이 다양하고 명확해야 할 때 유용합니다.

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

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

상태의 변경이 명확하게 액션을 통해 이루어지기 때문에 가독성이 높고, 테스트하기도 용이합니다.

3. 언제 useState를 쓰고, 언제 useReducer를 써야 할까?

• useState: 상태가 단순하고, 컴포넌트 하나에서만 관리될 때
• useReducer: 상태가 여러 값으로 구성되어 있고, 상태 변경 로직이 복잡하거나 다양한 액션이 필요한 경우

4. 실제 사용 예시

To-Do 리스트나 폼 입력처럼 상태가 복잡한 경우 useReducer를 사용하면 구조적인 코드를 작성할 수 있습니다. 반면, 단순한 토글 버튼이나 숫자 증가 같은 로직은 useState로 충분합니다.

5. 마무리

useState와 useReducer는 각각의 특성과 장점이 있기 때문에, 프로젝트의 요구사항에 따라 적절히 선택하는 것이 중요합니다. 코드를 더욱 깔끔하고 유지보수하기 쉬운 방향으로 작성해 보세요!