자바스크립트로 구현하는 유한 상태 기계 XState

FSM(유한 상태 기계) 개념을 JavaScript로 구현하는 XState 라이브러리의 기본 사용법을 장바구니 예시로 설명한다. boolean 플래그로 상태를 관리할 때 생기는 복잡도 문제를 XState가 선언적 방식으로 어떻게 해결하는지 단계별로 보여준다.

핵심 포인트

FSM은 상태를 하나로 제한하고 입력에 따른 전이를 명시해 복잡한 조건 분기를 단순하게 만든다.
XState의 createMachine()으로 상태·이벤트·전이를 선언적으로 정의한다.
컨텍스트(Context)는 상태 흐름과 분리된 부가 데이터 저장소로, useState로 뒤섞이는 상태/데이터를 명확히 구분한다.
assign() 함수로 컨텍스트를 불변하게 업데이트하고, 액션으로 사이드 이펙트를 처리한다.
자기 전이(self-transition)로 상태 유지 + 컨텍스트 갱신을 분리할 수 있다.

상세 정리

문제 제기: 게임 캐릭터 예시에서 boolean 플래그가 2개만 돼도 조건 분기가 급격히 복잡해진다. 상태가 3개 이상이면 가독성이 사실상 붕괴된다.
FSM 구조: 가질 수 있는 상태 목록을 미리 열거하고, 현재 상태에서 어떤 이벤트가 어떤 상태로 전이하는지 switch-case로 명시한다. 코드 양은 늘어도 패턴이 생겨 가독성이 높아진다.
XState 설치: `npm i xstate @xstate/react`. React용 useMachine 훅 제공.
createMachine() 구조: id·initial·states 객체에 상태 노드를 정의하고, 각 노드 안의 on에 이벤트를 선언한다.
상태 전이: empty 상태에서 ADD_ITEM 이벤트 → target: hold로 전이. useMachine의 state.value로 현재 상태 확인, send()로 이벤트 발송.
컨텍스트(Context): 상태 기계의 context 키에 초기값 선언. 상태(empty/hold)와 데이터(items 배열)를 분리 관리한다. state.context로 접근.
액션(Actions): createMachine의 두 번째 인자 actions 객체에 함수 정의. 첫 인자로 context, 두 번째로 event payload를 받는다.
assign(): 컨텍스트를 불변하게 업데이트하는 공식 방법. `assign({items: (ctx, event) => [...ctx.items, event.item]})` 처럼 순수 함수로 작성한다.
자기 전이: hold 상태에서 ADD_ITEM 이벤트에 target을 생략하면 hold→hold로 자기 전이. 상태는 그대로지만 컨텍스트 items가 누적된다.
활용 소감: 상태와 데이터를 구분하는 명확성이 가장 큰 장점이며, 단독으로도 상태 관리 라이브러리 역할을 충분히 할 수 있다고 평가했다.

왜 읽나React에서 복잡한 UI 상태를 boolean 플래그 없이 선언적으로 관리하는 방법을 찾는 프런트엔드 개발자에게 XState 도입의 진입점이 된다.

카카오 엔터테인먼트 FE 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

자바스크립트로 구현하는 유한 상태 기계 XState

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다