복잡한 UI 상태를 제어할 수 있는 클라이언트 기반 상태 관리 라이브러리 중 하나

FSM 기반 상태 제어 라이브러리.

<aside> 💡 FSM이란? 유한한 상태의 전이를 표현하는 기계. 수학적 모델로써, 한 번에 오직 한 개의 상태만을 가질 수 있는 유한한 상태들로 이루어져 있는 모델이고 각 상태를 전환할 수 있다.

</aside>

사용자의 행위를 상태 값으로 정의하고 이를 순수 함수로 작성하는 것은 복잡하고 어렵다.

이를 해결하기 위해 XState를 활용해 선언적으로 FSM 모델을 생성하고 상태 관리 기능을 제공함

FSM은 다섯부분으로 구성

• 하나의 초기 상태(an initial State)
• 유한 개의 상태(a finite number of States)
• 유한 개의 이벤트(a finite number of Events)
• 현재 상태와 이벤트로 다음 상태를 결정하는 전이 함수(A transition function that determines the next state givent the current state and event)
• 유한 개의 최종 상태(a finite final States)

회원가입 서버 요청 Xstate로 구현

• idle → (fetching) → loading → (success) → resolved
• idle → (fetching) → loading → (failure) → rejected

위 회원가입 서버 요청을 FSM으로 생각해보면 아래와 같음

• 하나의 초기 상태 : idle
• 유한 개의 상태 : idle, loading, resolved, rejected
• 유한 개의 이벤트 : fetching, success, failure
• 현재 상태와 이벤트로 다음 상태를 결정하는 전이 함수
  • fetching: idle → loading
  • success: loading → resolved
  • failure: loading → rejected
• 유한 개의 최종 상태 : resolved