XState에서 뒤로가기 구현하기

XState를 들어보셨나요? 복잡한 이벤트, 상태를 선언적으로 개발할 수 있는 FSM이란 모델을 자바스크립트에서 쉽게 쓸 수 있게 구현해둔 라이브러리입니다. 저는 핸드폰 요금제 가입 Flow를 개발할 때 XState를 사용했는데요, 여러 페이지에 거쳐 유저가 기입한 정보를 얻어내는 flow를 한번에 정의하기 참 좋아서 만족도가 높았습니다 예를 들면 [통신사 선택 페이지] ->(다음 버튼 클릭) -> [납부카드 입력 페이지] -> (직접기입 버튼 클릭) -> [직접입력 페이지] 디자이너가 한 판으로 그려주는 이런 일련의 flow를 Object 하나로 정의할 수 있게 되는거죠. 다만 큰 산이 하나 있었습니다. 여러 페이지에 거쳐 정보를 받아내는 설문조사형 UX라 뒤로가기, 앞으로가기가 가능해야하는데 "가용한 모든 이벤트와 상태를 정적으로 미리 생성해둔다!" 란 XState의 컨셉에선 "동적으로 쌓이는 history를 참조해서 페이지를 이동시킨다!" 가 근본적으로 들어맞지 않더라구요. 하지만 결국 그랬듯이 우리는 답을 찾아낼 수 있습니다.