React · reducer

Todo 액션이 reducer를 거쳐 상태로 반영되는 흐름

UI 이벤트는 action으로 표현되고 reducer는 action 타입에 따라 새 todo 상태를 계산합니다.

Reducer 처리 단계

todo

Input Event

사용자가 추가, 완료, 삭제를 요청합니다.

dispatch

이벤트를 명시적 action으로 보냅니다.

reducer

ADD, TOGGLE, REMOVE 분기를 처리합니다.

new state

불변성을 지키며 새 배열을 반환합니다.

TodoList

변경된 상태를 다시 렌더링합니다.

event → dispatch → reducer → new state → render

정리

useReducer는 코드가 길어지는 대신 상태 변경 의도를 action 이름으로 남겨 복잡한 UI 상태를 추적하기 쉽게 만듭니다.