XState로 장바구니 구현하며 배우는 FSM과 상태 관리

기존의 if-else나 플래그 변수 방식은 상태가 증가할수록 코드의 복잡도가 급격히 상승한다. XState는 이러한 문제를 해결하기 위해 유한 상태 기계(FSM)를 JavaScript로 구현한 라이브러리로, 상태와 데이터를 명확히 구분하여 관리한다.

XState의 핵심 개념

XState는 createMachine을 통해 상태 기계를 정의하며, 각 상태는 on 속성을 통해 이벤트에 따른 전이 규칙을 가진다. 리액트 환경에서는 @xstate/react의 useMachine 훅을 사용하여 현재 상태(state.value)와 이벤트 전송 함수(send)를 쉽게 연동할 수 있다.

특히 XState는 상태 흐름 제어와 부가적인 데이터를 분리하는 데 중점을 둔다.

• 상태(State): 제한된 개수의 유한한 상태(예: empty, hold)로 정의된다.
• 컨텍스트(Context): 장바구니의 아이템 목록처럼 무한하거나 동적인 데이터를 저장하는 'extended state'이다.
• 액션(Action): 컨텍스트를 변경하거나 사이드 이펙트를 실행하는 함수로, assign을 사용해 불변성을 유지하며 데이터를 업데이트한다.

복잡한 로직 처리: 가드와 서비스

단순 전이 외에도 XState는 복잡한 비즈니스 로직을 효과적으로 처리한다.

• 가드(Guard)와 Eventless Transition: 특정 조건이 충족될 때 자동으로 전이되는 always 속성과 가드 함수를 결합한다. 예를 들어, 장바구니 아이템이 모두 삭제되면 isEmpty 가드를 통해 자동으로 empty 상태로 전이시켜 버그를 방지한다.
• 서비스(Service): invoke 속성을 사용해 API 호출과 같은 비동기 작업을 관리한다. Promise의 onDone과 onError를 통해 성공/실패에 따른 상태 전이를 선언적으로 정의할 수 있으며, final 타입의 상태에 도달하면 onDone 콜백을 실행해 외부 로직과 연동할 수 있다.

실전 적용 및 재사용성

장바구니 예제를 통해 ADD_ITEM, REMOVE_ITEM, PURCHASE 등의 이벤트를 처리하는 흐름을 구현했다. XState는 상태 기계를 모듈화하여 재사용할 수 있으며, useMachine의 두 번째 인자로 액션이나 가드를 주입(Override)하여 동일한 상태 기계 구조를 다른 컴포넌트에서 유연하게 적용할 수 있다. 복잡한 UI 상태 관리에 있어 XState는 코드의 가독성과 예측 가능성을 높여주는 강력한 도구이다.