React useState vs useReducer 비교
React에서 상태 관리를 위한 두 가지 주요 Hook인
useState와useReducer를 비교하고, 어떤 상황에서 어떤 Hook을 사용하는 것이 더 효과적인지 알아봅니다.
왜 상태 관리가 중요할까?
React 애플리케이션에서 상태 관리는 핵심적인 부분인데요. 사용자 인터페이스는 상태 변화에 따라 끊임없이 업데이트되기 때문이죠. React는 컴포넌트의 상태를 관리하기 위한 다양한 방법을 제공하는데, 그중 가장 기본적이면서도 중요한 두 가지가 바로 useState와 useReducer입니다. 간단한 상태 관리는 useState로 충분하지만, 복잡한 상태 로직이나 여러 하위 값들을 관리해야 할 때는 useReducer가 더 나은 선택이 될 수 있어요.
① useState: 간단한 상태 관리를 위한 Hook
useState는 가장 기본적인 상태 관리 Hook인데요. 컴포넌트 내에서 상태를 선언하고 업데이트하는 데 사용됩니다. 간단한 숫자, 문자열, 불리언 값 등을 관리할 때 유용하죠.
javascript import React, { useState } from 'react';
function Counter() { const [count, setCount] = useState(0);
return (
Count: {count}
<button onClick={() => setCount(count + 1)}>Increment); }
export default Counter;
위 예제에서 useState(0)은 초기 상태를 0으로 설정하고, count라는 상태 변수와 setCount라는 상태 업데이트 함수를 반환합니다. setCount 함수를 사용하여 count 값을 업데이트하면 컴포넌트가 다시 렌더링됩니다.
② useReducer: 복잡한 상태 관리를 위한 Hook
useReducer는 useState보다 더 복잡한 상태 로직을 관리하는 데 적합한 Hook인데요. Reducer 함수를 사용하여 상태 업데이트 로직을 분리하고, 액션 객체를 통해 상태 변화를 디스패치합니다. 여러 하위 값들을 가진 객체 상태나, 상태 업데이트 로직이 복잡한 경우에 useReducer가 유용합니다.
javascript 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: throw new Error(); } }
function Counter() { const [state, dispatch] = useReducer(reducer, initialState);
return (
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>Increment <button onClick={() => dispatch({ type: 'decrement' })}>Decrement); }
export default Counter;
위 예제에서 useReducer(reducer, initialState)는 reducer 함수와 초기 상태를 사용하여 상태를 관리합니다. dispatch 함수를 사용하여 액션 객체를 디스패치하면, reducer 함수가 현재 상태와 액션 객체를 기반으로 새로운 상태를 반환합니다.
핵심 개념 비교
| 항목 | useState | useReducer |
|---|---|---|
| 복잡도 | 단순 | 복잡 |
| 상태 업데이트 로직 | 직접 상태 업데이트 함수 사용 | Reducer 함수를 통해 업데이트 |
| 적합한 상황 | 간단한 상태, 적은 수의 상태 값 | 복잡한 상태, 여러 하위 값, 복잡한 업데이트 로직 |
| 코드 양 | 적음 | 많음 |
| 예측 가능성 | 낮음 (상태 업데이트 로직이 분산될 수 있음) | 높음 (Reducer 함수로 상태 업데이트 로직 집중) |
언제 무엇을 선택해야 할까?
① useState를 선택하는 경우
- 상태가 단순하고, 상태 업데이트 로직이 간단할 때
- 컴포넌트 내에서 관리해야 할 상태 값이 적을 때
- 빠른 개발 속도가 중요할 때
② useReducer를 선택하는 경우
- 상태가 복잡하고, 상태 업데이트 로직이 여러 단계로 나뉠 때
- 여러 하위 값들을 가진 객체 상태를 관리해야 할 때
- 상태 변화를 예측 가능하게 관리하고 싶을 때
- Redux와 유사한 패턴을 사용하고 싶을 때
마무리
useState와 useReducer는 React 애플리케이션에서 상태를 관리하는 강력한 도구인데요. 어떤 Hook을 선택할지는 애플리케이션의 복잡도와 요구 사항에 따라 달라집니다. 간단한 상태 관리는 useState로, 복잡한 상태 관리는 useReducer로 해결할 수 있다는 점을 기억하고, 상황에 맞는 Hook을 선택하여 효율적인 상태 관리를 해보세요. 두 Hook을 적절히 활용하면 더욱 강력하고 유지보수하기 쉬운 React 애플리케이션을 개발할 수 있을 거예요.