React에서 상태를 관리하는 방법에는 여러 가지가 있지만,
useState와useReducer는 가장 많이 사용되는 두 가지 훅입니다.
이 둘은 비슷하게 보일 수 있지만, 각각의 사용 목적과 특징이 다릅니다.
이번 포스트에서는useState와useReducer를 비교하며, 언제 각 훅을 사용하는 것이 적합한지에 대해 알아보겠습니다.
1. useState
useState는 React 컴포넌트 내에서 간단한 상태를 관리할 수 있는 훅입니다. 상태 값과 그 상태를 변경하는 함수를 반환하여, 상태를 직접 관리할 수 있게 해줍니다.
사용법
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}🔥 특징
- 단일 상태 값 관리:
useState는 간단한 값 하나를 관리할 때 적합합니다. - 상태값과 업데이트 함수:
useState는 상태값과 이를 갱신하는 함수를 함께 반환합니다. - 간단한 상태 업데이트: 상태 업데이트가 단순할 때 매우 직관적이고 사용하기 쉽습니다.
💡 언제 사용하나요?
- 상태가 하나일 때
- 상태 로직이 간단할 때
✅ 장점
- 간단함: 단순한 상태 관리에 매우 직관적이고 사용하기 쉽습니다.
- 직관적인 코드: 상태와 업데이트 함수가 한 번에 반환되므로 코드가 깔끔하고 직관적입니다.
- 빠른 설정: 설정이 매우 간단하고, 빠르게 구현할 수 있습니다.
❌ 단점
- 복잡한 상태 관리에는 한계: 상태가 많아지거나 복잡해지면 코드가 복잡해지고 관리하기 어려워질 수 있습니다.
- 상태 업데이트 로직의 제어 부족: 상태 업데이트가 간단할 때는 괜찮지만, 여러 조건에 따라 복잡한 로직을 관리하려면 불편할 수 있습니다.
2. useReducer
useReducer는 상태 업데이트가 복잡할 때 사용되는 훅입니다. 여러 가지 상태를 하나의 객체로 관리하거나, 상태 변화가 여러 가지 조건에 따라 달라져야 할 때 유용합니다. 리듀서 함수와 액션 객체를 사용하여 상태를 업데이트합니다.
사용법
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' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
}🔥 특징
- 복잡한 상태 관리: 여러 값이 연관되어 있거나 복잡한 상태 로직이 필요할 때 유용합니다.
- 리듀서 함수 사용: 상태 업데이트 로직을
switch문으로 명확하게 정의할 수 있습니다. - 디스패치 방식: 액션 객체를 디스패치하여 상태를 업데이트합니다.
💡 언제 사용하나요?
- 상태가 여러 개일 때
- 상태 변화가 복잡할 때
- 여러 액션에 따라 상태를 업데이트할 때
✅ 장점
- 복잡한 상태 로직 처리: 여러 상태 값들이 연관되어 있거나 복잡한 상태 로직을 관리할 때 유용합니다.
- 상태 업데이트 로직 명확화: reducer 함수 내에서 상태 업데이트 로직을 명확하게 분리할 수 있어 디버깅이 용이합니다.
- 확장성: 여러 액션을 다루는 데 용이하여, 코드가 커져도 관리하기 수월합니다.
❌ 단점
- 초기 설정 복잡: useState보다 설정이 복잡할 수 있으며, 작은 상태에 대해서는 과도할 수 있습니다.
- 학습 곡선: reducer와 dispatch 개념을 이해하는 데 시간이 필요할 수 있습니다.
- 불필요한 코드 중복: 상태 값이 매우 간단한 경우 useReducer는 오히려 코드가 복잡해지거나 불필요하게 느껴질 수 있습니다.
useState vs useReducer 비교
| 특성 | useState | useReducer |
|---|---|---|
| 상태 관리 방식 | 단일 값 관리 | 여러 값이나 복잡한 상태 관리 |
| 상태 업데이트 방식 | 직접 상태 값 설정 | reducer 함수와 액션 객체를 통한 상태 업데이트 |
| 디버깅 용이성 | 간단한 상태 업데이트에 용이 | 상태 변화 로직을 명확하게 분리 가능 |
| 복잡한 상태 로직 | 상태 로직이 단순할 때 사용 | 상태 로직이 복잡하거나 여러 상태가 연관될 때 사용 |
| 사용 예시 | 카운터, 폼 입력 등 간단한 상태 관리 | 복잡한 애플리케이션 상태 관리 |
💡 언제 useState를 사용해야 할까요?
단일 값 상태를 관리할 때
- 버튼 클릭으로 카운트를 증가시키는 간단한 상태 관리에는
useState가 매우 직관적이고 간결합니다.
상태 업데이트가 복잡하지 않을 때
- 값 하나만 관리할 때
useState가 더 간단하고, 코드가 깔끔해집니다.
💡 언제 useReducer를 사용해야 할까요?
상태가 여러 개일 때:
- 상태 값이 여러 개일 때 하나의 객체로 묶어서 관리할 수 있어, 코드가 더 깔끔하고 효율적입니다.
상태 변화가 복잡하거나 조건에 따라 달라질 때:
- 여러 조건에 따라 상태가 변경되거나, 상태 업데이트 로직이 복잡할 때
useReducer가 적합합니다.
여러 액션에 따른 상태 변화가 필요할 때:
- 여러 가지 액션을 다뤄야 할 때,
useReducer는 코드가 더욱 명확하고 관리하기 쉬워집니다.
결론 🚀
useState와 useReducer는 각각의 특성에 맞게 사용해야 합니다.
useState는 간단한 상태를 다룰 때 적합하고,useReducer는 상태가 복잡하거나 여러 액션에 따라 변화하는 상태를 관리할 때 유용합니다.
각각의 상황에 맞는 훅을 선택하여, 더 깔끔하고 효율적인 상태 관리가 가능하므로, 필요에 맞게 잘 활용해 보세요!
동균이다