프론트엔드
XState 도입기: 복잡한 여행 플랜 상태 관리를 단순화한 방법
두줄요약
여행 플랜처럼 단계가 많고 분기 있는 흐름을 XState 상태 머신으로 정리한 도입기였습니다. React 상태 관리보다 전이 로직을 한곳에 모아 유지 보수와 협업을 쉽게 만든 사례였습니다.
문제 상황
- 여행 플랜 질문 단계가 여러 갈래로 분기되고, 이전 단계 이동과 초기화까지 필요한 복잡한 흐름
- React 기본 상태 관리만으로 처리해 단계 추가 시 분기와 검증 수정 범위가 급격히 증가
원인 분석
- 상태와 전이 로직이 컴포넌트 곳곳에 흩어져 유지 보수 난이도 상승
- 단계별 입력값 저장, 조건 분기, 뒤로가기 같은 규칙이 한곳에 모이지 않음
해결 방법
- XState의 유한 상태 머신으로 각 단계를 상태로 정의하고 전이를 이벤트 중심으로 구성
- 컨텍스트에 선택값을 저장하고 useMachine, state.matches, send로 UI와 상태를 연결
적용해볼 점
- 단계형 폼, 분기 많은 온보딩, 뒤로가기·리셋이 있는 플로우에 상태 머신 적용 고려
- 비즈니스 로직과 UI 분리로 수정 범위와 협업 부담을 줄이는 구조 점검
