useReducer
복잡한 상태 변경은 action과 reducer로 모아 예측 가능하게 만든다
컴포넌트는 이벤트를 action으로 표현하고, reducer는 현재 상태와
action만 보고 다음 상태를 계산한다.
선택 기준
상태
여러 값이 함께 움직이면 하나의 상태 전이 규칙으로 묶는다.
액션
증가, 삭제, 로딩 완료처럼 의도를 이름 붙여 전달한다.
테스트
순수 함수라 입력과 출력만으로 상태 변경을 검증할 수 있다.
01
Event
클릭, 입력, 응답 완료 같은 사용자·비동기 신호가 시작점이다.
02
Action
{ type } 형태로 어떤 일이 일어났는지
설명한다.
03
Reducer
현재 state를 직접 바꾸지 않고 새 state 객체를 반환한다.
04
State
계산된 다음 상태가 컴포넌트 렌더 기준이 된다.
05
Render
화면은 state에서 파생되고 부수 효과는 별도 훅에 둔다.
| 상황 | useState | useReducer | 판단 기준 |
|---|---|---|---|
| 독립 값 하나 | 간단하고 빠름 | 과한 구조가 될 수 있음 | 변경 규칙이 단순한가 |
| 연관 상태 묶음 | 여러 setter가 흩어짐 | 전이 규칙을 한곳에 둠 | 상태가 함께 움직이는가 |
| 복잡한 분기 | 조건문이 컴포넌트에 쌓임 | action별 분기로 정리 | 이벤트 종류가 많은가 |
순수성
reducer 안에서는 네트워크 요청이나 랜덤 값을 만들지 않는다.
불변성
기존 state를 직접 수정하지 않고 새 객체나 배열을 반환한다.
분리
상태 계산은 reducer, 부수 효과는 effect, 화면은 render가 맡는다.