XState 도입기: 복잡한 여행 플랜 상태 관리를 단순화한 방법

문제 상황

• 여행 플랜 질문 단계가 여러 갈래로 분기되고, 이전 단계 이동과 초기화까지 필요한 복잡한 흐름
• React 기본 상태 관리만으로 처리해 단계 추가 시 분기와 검증 수정 범위가 급격히 증가

원인 분석

• 상태와 전이 로직이 컴포넌트 곳곳에 흩어져 유지 보수 난이도 상승
• 단계별 입력값 저장, 조건 분기, 뒤로가기 같은 규칙이 한곳에 모이지 않음

해결 방법

• XState의 유한 상태 머신으로 각 단계를 상태로 정의하고 전이를 이벤트 중심으로 구성
• 컨텍스트에 선택값을 저장하고 useMachine, state.matches, send로 UI와 상태를 연결

적용해볼 점

• 단계형 폼, 분기 많은 온보딩, 뒤로가기·리셋이 있는 플로우에 상태 머신 적용 고려
• 비즈니스 로직과 UI 분리로 수정 범위와 협업 부담을 줄이는 구조 점검