useReducer와 상태 전이 관리

전이 목록화

increment, reset, submitStart, submitFail처럼 상태를 바꾸는 사건을 먼저 적는다.

setter 여러 개보다 사건 이름이 읽기 좋다

type과 payload가 어떤 상태 전이에 필요한지 좁게 설계한다.

payload를 any처럼 쓰면 reducer 장점이 줄어든다

reducer 안에서는 API 호출, 날짜 생성, 랜덤값 같은 부수효과를 넣지 않는다.

같은 입력은 같은 출력을 내야 한다

비싼 초기 상태 계산은 lazy init으로 한 번만 실행되게 한다.

props 변화와 초기화 재실행을 혼동하지 않는다

dispatch를 이벤트 핸들러에서 호출하고, effect는 상태 변화의 결과로 별도 처리한다.

reducer는 상태 계산만 맡는다

useState

독립적이고 단순한 값 열림 여부, 작은 입력값처럼 한 이벤트가 한 상태만 바꾸면 충분하다.

읽기 쉬운 쪽이 정답이다

useReducer

전이가 많은 상태 여러 필드가 한 action에 함께 바뀌거나 이전 상태 의존이 크면 적합하다.

상태기계처럼 읽힌다

lazy init

초기 계산 분리 초기 상태 계산이 비싸거나 reset 기준이 필요할 때 사용한다.

매 렌더 계산을 피한다

dispatch

안정적인 전이 함수 하위 컴포넌트에 전달해도 identity가 안정적이다.

Context와 결합할 수 있다

순수성 reducer 내부에 API 호출, localStorage, Date, Math.random이 없는지 확인한다.

불변 갱신 중첩 객체 변경이 기존 상태를 직접 바꾸지 않는지 본다.

Action 누락 default 분기에서 알 수 없는 action을 조용히 삼키지 않는지 확인한다.