useState 대신 useReducer를 언제 사용하나요?

Question

Accepted Answer

`useReducer`는 여러 `useState` setter를 흩뿌리는 대신, state 전이를 단일 **순수 reducer 함수**에 중앙화합니다. 이는 Redux 패턴의 React 내장 버전입니다. ```jsx function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + 1 }; case "setStep": return { ...state, step: action.payload }; case "reset": return { count: 0, step: 1 }; default: return state; } } function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 }); // 상태가 어떻게 변하는지가 아니라 무슨 일이 일어났는지를 기술: return ; } ``` ## 동작 방식 **action**(이벤트를 기술하는 단순한 객체)을 `dispatch`합니다. React는 `reducer(currentState, action)`을 호출하고 반환된 객체를 새 state로 사용합니다. reducer는 **순수**(side effect 없음, 변경 없음)하므로 로직이 예측 가능하고 독립적으로 단위 테스트하기 좋습니다. ## useState보다 선호해야 할 때 - 다음 state가 이전 state에 **사소하지 않은 방식으로 의존**할 때. - 여러 값이 **함께 변경**될 때(예: `count` + `step` + `error`). - 업데이트 로직이 충분히 복잡하여 여러 핸들러에서 반복하게 될 때. ```jsx // 4개의 별도 useState + 6개의 setter 대신, 하나의 reducer가 모두 소유 ``` 보너스: `dispatch`는 **안정적인 identity**를 가지므로, context를 통해 전달하거나 memo된 자식에게 전달해도 re-render를 유발하지 않습니다. 간단하고 독립적인 값에는 여전히 일반 `useState`가 더 명확합니다.