핵심 답변
📌 useState단순한 값을 관리할 때 사용합니다. 상태와 업데이트 함수를 반환합니다.
📌 useReducer복잡한 상태 로직을 관리할 때 사용합니다.
dispatch 함수와 reducer 함수를 분리해 상태 전환 로직을 체계적으로 관리합니다.상태가 여러 값에 의존하며 복잡하게 변할 때 → useReducer
로직을 컴포넌트 밖으로 분리하고 싶을 때 → useReducer
단순한 원시 값 관리 → useState
예시 코드
typescript
// useState
const [count, setCount] = useState(0);
setCount(c => c + 1);
// useReducer
function reducer(state, action) {
switch (action.type) {
case 'increment': return { count: state.count + 1 };
case 'decrement': return { count: state.count - 1 };
case 'reset': return { count: 0 };
default: return state;
}
}
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });핵심 용어
📌 Reducer이전 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다. 같은 입력에는 항상 같은 출력을 보장합니다.
📌 dispatch액션 객체를 reducer에 전달하는 함수입니다.
dispatch({ type: 'increment' }) 형태로 사용합니다.📌 액션(Action)어떤 상태 변화를 일으켜야 하는지를 설명하는 객체입니다. 보통
type 속성을 가집니다.