상태 머신(state machine)이란 무엇이며 언제 도움이 되나요?

Question

Accepted Answer

**상태 머신(state machine)**은 시스템을 유한한 **상태(state)** 집합과 그들 사이의 허용된 **전이(transition)**로 모델링합니다. 독립적인 boolean 플래그를 곡예하듯 다루는 대신, 정확히 어떤 상태가 존재하고 어떤 전이가 합법인지 정의하여 불가능한 상태를 표현 불가능하게 만듭니다.

## 문제: boolean 수프

```js
// ❌ 여러 boolean → 2^n 조합, 그중 다수가 유효하지 않음
const [isLoading, setLoading] = useState(false);
const [isError, setError] = useState(false);
const [isSuccess, setSuccess] = useState(false);
// { isLoading: true, isError: true, isSuccess: true } — 말이 안 되지만 가능함
```

독립적인 플래그로는 모순된 조합을 막을 수 없으며, 모든 전이에서 수동으로 일관성을 유지해야 합니다 — 버그 자석입니다.

## 상태 머신 모델

```text
상태:        idle → loading → success
                       ↓
                     error → (retry) → loading

정의된 전이만 허용됨; 동시에 두 상태일 수 없음.
```

```js
const machine = {
  idle:    { FETCH: "loading" },
  loading: { SUCCESS: "success", ERROR: "error" },
  success: { FETCH: "loading" },
  error:   { RETRY: "loading" },
};
function transition(current, event) {
  return machine[current][event] ?? current; // 합법적인 전이만 일어남
}
```

단일 `state` 변수가 현재 상태를 보유하고, `event`가 *정의된* 전이를 유발합니다. 불법 전이(예: idle 중 SUCCESS)는 그냥 발생할 수 없습니다 — 불가능한 상태가 설계상 사라집니다.

## 실무 도구: XState

```js
// XState 같은 라이브러리는 가드, 액션, 중첩/병렬 상태로 이를 형식화함
const toggleMachine = createMachine({
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active:   { on: { TOGGLE: "inactive" } },
  },
});
```

## 상태 머신이 도움이 되는 경우

```text
✓ 많은 상태를 가진 복잡한 흐름: 결제, 다단계 폼/위저드, 미디어 플레이어
✓ 인증 흐름(logged out → logging in → logged in → refreshing)
✓ 유효하지 않은 state 조합이 버그를 일으키는 모든 경우
✗ 단순한 토글이나 사소한 state에는 과함
```

## 왜 중요한가

상태 머신은 **유효하지 않은 상태를 불가능하게** 만들고 전이를 **명시적**으로 만들어 복잡한 stateful 로직에 엄밀함을 가져옵니다 — 취약한 boolean 조합을 명확하고 완전한 모델로 대체합니다.

boolean 수프가 미묘하고 재현하기 어려운 버그로 이어지는 복잡한 흐름(위저드, 결제, 인증, 미디어)에 특히 유용합니다.

비형식적으로도(`status` enum) 이 아이디어는 비동기 state를 개선하며, 형식적으로는(XState) 시각화 가능하고 테스트 가능하며 견고한 로직을 제공합니다.

언제 이를 꺼내 쓸지 아는 것이 성숙한 state 설계의 표식입니다.