useReducer는 사건을 다음 상태로 번역한다

컴포넌트는 “무슨 일이 일어났는지” dispatch하고, reducer 한곳이 “그 사건 뒤 상태가 무엇인지” 결정한다.

UI EVENT 의도 발생

사용자가 증가 버튼을 누른다.

onClick

DISPATCH 사건 전달

다음 값을 직접 정하지 않고 사건을 보낸다.

{ type: 'increment' }

REDUCER 순수 계산

현재 상태와 action만으로 다음 상태를 반환한다.

1 + increment → 2

NEXT RENDER 일관된 결과

React가 반환값을 다음 렌더의 state로 사용한다.

count = 2

Reducer 안

불변 갱신 · 전이 규칙 · 같은 입력에 같은 출력

Reducer 밖

API 호출 · 타이머 · 저장소 접근은 이벤트 핸들러나 Effect가 담당

선택 신호 하나의 사건으로 여러 필드가 함께 바뀌고, 허용되는 전이를 한곳에서 설명해야 할 때 reducer의 비용이 가치가 된다.