useReducer로 이벤트를 상태 전이로 묶기

상태 모델

폼 값, 단계, 오류처럼 함께 바뀌는 값을 하나의 객체로 묶는다.

액션 정의

setName 같은 setter보다 submitted, fieldChanged 같은 사건 이름을 둔다.

전이 계산

reducer는 입력이 같으면 같은 다음 상태를 반환하는 순수 함수로 유지한다.

UI 연결

컴포넌트는 dispatch만 호출하고 세부 변경 규칙은 reducer에 맡긴다.

fieldChanged

입력 갱신 name과 value payload로 특정 필드를 바꿈

validation과 분리 가능

submitted

제출 시도 touched, pending, error 상태를 한 번에 전환

여러 setState보다 읽기 쉬움

succeeded

성공 반영 pending 해제와 결과 저장을 같은 규칙으로 처리

비동기는 reducer 밖에서

failed

오류 반영 서버 오류와 필드 오류를 구분해 저장

상태 모양 유지

순수성 · 액션 이름 · 기본 분기 점검

순수성 reducer 안에서 fetch, Date.now, localStorage 접근을 하지 않는다.

액션 이름 상태 조작보다 사용자 사건을 표현한다.

기본 분기 알 수 없는 action에 대한 처리 방식을 명확히 둔다.

복잡도 단순 boolean 하나에는 useState가 더 낫다.

Reducer 골격

function reducer(state, action) {
  switch (action.type) {
    case 'submitted':
      return { ...state, pending: true, error: null };
    default:
      return state;
  }
}