XState는 무엇을 위해 사용됩니까?

XState는 백엔드든 프런트엔드든 JavaScript가 실행되는 모든 곳에서 사용할 수 있습니다. 생성하는 코드를 시각화할 수 있기 때문에 복잡한 사용 사례를 처리하는 데 탁월합니다. 복잡한 코드 조각이 무엇을 하는지 볼 수 있으면 매우 유용할 수 있습니다.

각 사용 사례를 하나씩 살펴보겠습니다.

웹에서

XState는 모든 프런트엔드 애플리케이션에서 상태를 관리하는 데 사용할 수 있습니다. 그것은 React , Vue , Svelte 에 대한 일급 통합뿐만 아니라 향후 Solid 통합을 포함합니다. 통합할 필요 없이 Angular에서도 잘 작동합니다.

다음 간단한 코드를 실행하여 Vanilla JS 앱에서 사용해 볼 수 있습니다.

import { createMachine, interpret } from "xstate";

const machine = createMachine({
  initial: "waiting",
  states: {
    waiting: {
      after: {
        2000: "alerted",
      },
    },
    alerted: {
      entry: () => {
        alert("Hello from the state machine!");
      },
    },
  },
});

interpret(machine).start();

이 예에서 머신은 2초 동안 기다린 다음 alert()를 호출하여 살아 있음을 알립니다.

프런트엔드에서 XState를 사용할 수 있는 방법은 많습니다. 가장 일반적인 두 가지 패턴에 대해 이야기해 보겠습니다.

복잡한 구성 요소

대부분의 프런트엔드 앱은 코드를 구성 요소로 분할합니다. 즉, 앱 전체에서 재사용할 수 있는 개별 조각입니다. 복잡한 구성 요소를 빌드해야 하는 경우 XState를 사용하여 조정할 수 있습니다.

이것의 좋은 예는 라이브러리Zag.js이며 XState 스타일 구문 및 상태 차트를 사용하여 프레임워크 간에 재사용 가능한 구성 요소를 구축합니다. Stately의 도구를 사용해도 됩니다see them visualized.

글로벌 상태

XState를 사용하여 앱의 전역 상태를 관리할 수도 있습니다. 일반적인 패턴은 Flux 아키텍처로, 단일 최상위 저장소에 이벤트를 전달합니다. 앱의 일부는 selectors 을 사용하여 해당 스토어의 업데이트를 구독할 수 있습니다.

XState는 Redux 또는 Vuex 과 같은 전역 상태 관리자를 대체할 수 있으며, 한 가지 주요 이점은 전역 상태를 시각화할 수 있고 visually edited 입니다. XState는 글로벌 스토어를 생성하고 이벤트를 발송하며 중요한 부분만 구독할 수 있는 기능을 제공합니다. 자세한 내용은 React의 특정 지침을 참조하십시오.

기본/확장

XState는 React Native 또는 Electron 앱, 브라우저 확장 및 IDE 확장에서도 매우 유용합니다. XState는 브라우저 API를 사용하지 않으므로 JavaScript가 실행되는 모든 곳에서 사용할 수 있습니다.

예를 들어 Stately에서 XState를 co-ordinate our VSCode extension에 사용합니다. Centered은 Electron 및 React Native 앱에서 XState를 광범위하게 사용하여 타이머를 조정하고 앱 업데이트를 제어하며 복잡한 사용자 상호 작용을 처리합니다.

백엔드

Node.js 또는 Deno의 XState를 사용하여 serverless functions 또는 영구 서버를 구축할 수 있습니다.

람다 함수의 경우 XState는 waitFor 이라는 함수를 노출하여 상태 시스템이 특정 상태가 될 때까지 기다릴 수 있습니다. 이를 통해 XState 내부async 기능을 쉽게 사용할 수 있습니다.

백엔드의 XState에 대해 자세히 알아보려면 주제 소개를 참조하십시오.

스크립팅 및 CLI

장기 실행 프로세스를 조정하기 위해 스크립트 또는 CLI를 실행할 때 XState를 사용할 수 있습니다.

야생에서 이것의 가장 유명한 예는 프론트엔드 프레임워크Gatsby입니다. 빌드 프로세스 및 개발 서버에서 XState를 사용하여 파일 시스템 변경을 조정하고 여러 프로세스를 병렬화합니다. 이는 전체 빌드 시스템을 시각화할 수 있음을 의미합니다. 이러한 복잡한 프로세스에 매우 유용합니다.

요약

XState는 JS가 실행되는 모든 곳에서 작동하며 사람들은 모든 종류 또는 사용 사례에 대해 야생에서 사용하고 있습니다. 원격으로 복잡하게 느껴지는 무언가를 구축할 때마다 XState를 사용하여 코드를 단순화하고 강력한 시각적 도구를 사용할 수 있습니다.