프론트엔드
자바스크립트로 만든 유한 상태 기계 XState
두줄요약
XState로 FSM의 상태, 이벤트, 전이와 컨텍스트를 분리하는 방법을 장바구니 예제로 설명했습니다. React 훅, 가드, 액션, 비동기 서비스로 복잡한 UI 흐름을 선언적으로 관리합니다.
구조와 흐름
- FSM의 한정된 상태·단일 현재 상태·이벤트·전이 규칙으로 조건문과 플래그 증가에 따른 복잡도 완화
- XState의
createMachine기반 상태 노드,on이벤트,target전이 정의 - React의
useMachine훅으로 현재 상태 조회와send기반 이벤트 전달
선택 이유
- 흐름 제어용 유한 상태와 장바구니 상품 목록 같은 컨텍스트 데이터의 명확한 분리
- 상태 전이 조건, 허용 이벤트, 사이드 이펙트의 선언적 표현
- 복잡한 UI 상태 관계와 가능한 동작의 가시성 향상
주의할 점
hold상태에서 아이템 삭제 후 비어 있어도 상태가 유지되는 불일치 가능성always전이와isEmpty가드로 컨텍스트 조건에 따른 자동 전이 구성- 조건 전이 배열의 앞선 항목 우선순위와 조건 없는 기본 전이 활용
적용해볼 점
assign을 통한 불변 방식 컨텍스트 갱신과 액션 재사용invoke서비스로 Promise 기반 구매 API 호출,onDone·onError전이 연결- final 상태의
onDone리스너와useMachine옵션 기반 액션·가드 확장
