XState 및 React를 사용하여 유한 상태 머신을 구축하는 방법은 무엇입니까?

XState는 유한 상태 기계 및 상태 차트를 생성, 해석 및 실행하기 위한 라이브러리입니다. React Apps에서 상태를 관리하는 데 사용할 수 있는 정말 강력한 패키지입니다.

이 가이드에서는 XState 및 React를 사용하여 처음부터 Finite State Machine을 구축합니다.

다이빙하자!

What is a Finite State Machine?

Setting up

Building a State Machine

Resources

my blog에 원래 게시됨

유한 상태 머신이란 무엇입니까?

유한 상태 기계는 주어진 시간에 하나의 상태만 있을 수 있는 시스템의 동작을 설명하는 계산의 수학적 모델입니다. 예를 들어 스위치 버튼이 있고 상태는 켜짐 또는 꺼짐일 수 있으며 켜짐과 꺼짐을 동시에 가질 수 없으며 이것은 유한 상태 기계의 표현이라고 가정합니다.

이론만으로는 항상 혼란스럽다는 데 동의합니다.



이것은 약간 애매하지만 일단 상태 시스템을 구현하기 시작하면 걱정할 필요가 없습니다. 훨씬 더 명확해질 것입니다. 이제 새 React 앱을 만들고 필요한 종속성을 추가해 보겠습니다.

설정

이를 위해 터미널에서 다음 명령을 실행하여 새로운 React App을 생성해 봅시다.

npx create-react-app react-xstate-example

다음으로 아래 명령을 실행하여 xstate 및 @xstate/react 라이브러리를 추가해야 합니다.

yarn add xstate@latest @xstate/react

설치가 완료되면 이제 다음 섹션에서 상태 시스템 구축을 시작할 수 있습니다.

상태 머신 구축

이 가이드에서는 간단한 테마 스위처를 구축할 것이므로 먼저 상태 머신 구축을 시작하겠습니다.

XState에서 제공하는 훌륭한 도구The Xstate Visualizer가 있어 브라우저에서 상태 시스템을 구축하고 시각화할 수 있습니다.



이제 App.js에서 상태 시스템을 살펴보겠습니다.

Appjs

import React from "react"
import { Machine } from "xstate"
import "./App.css"

const changeTheme = Machine({
  id: "theme",
  initial: "dark",
  states: {
    dark: {
      on: { CHANGE: "light" },
    },
    light: {
      on: { CHANGE: "dark" },
    },
  },
})

여기에서 볼 수 있듯이 시각화 도우미로 구축된 것과 동일한 상태 머신을 사용합니다. 물론 상태 시스템을 구축하려면 Machine 라이브러리에서 xstate를 가져와야 합니다. 그렇지 않으면 작동하지 않습니다.

이제 Machine() 메서드에 인수로 전달된 개체를 분석해 보겠습니다.

id : 상태 시스템의 식별자 또는 이름입니다

.

initial : 이름에서 알 수 있듯이 기계의 초기 상태입니다.

states : 여기에 상태를 입력합니다. 여기에는 어두운 상태와 밝은 상태의 두 가지 상태가 있습니다

.

on : 작업을 시작하는 데 사용됩니다. 여기에서 테마를 변경하는 이벤트가 있습니다.

상태 시스템만으로는 많은 작업을 수행할 수 없으므로 다음 섹션에서 사용하겠습니다.

App.js

import React from "react"
import { Machine } from "xstate"
import { useMachine } from "@xstate/react"
import "./App.css"

const changeTheme = Machine({
  id: "theme",
  initial: "dark",
  states: {
    dark: {
      on: { CHANGE: "light" },
    },
    light: {
      on: { CHANGE: "dark" },
    },
  },
})

function App() {
  const [current, send] = useMachine(changeTheme)

  return (
    <div className="App">
      <h1>{current.matches("dark") ? "Dark Theme" : "Light Theme"}</h1>
      <button onClick={() => send("CHANGE")}>Change Theme</button>
    </div>
  )
}

export default App

여기에서 상태 머신을 인수로 취하고 현재 상태를 반환하는 후크useMachine를 가져오는 것으로 시작하고 이를 업데이트하는 함수를 반환합니다. useState 후크에 익숙하다면 동일한 방식으로 작동합니다.
current 상태에는 많은 속성이 있지만 여기서는 현재 상태가 매개 변수로 전달된 인수와 같은지 여부를 확인하고 결과적으로 처리하는 matches() 메서드만 필요합니다. 이제 버튼을 클릭하면 테마가 적절하게 변경됩니다.

엄청난! 우리는 XState와 React를 사용하여 Finite State Machines를 구축했습니다.

읽어 주셔서 감사합니다!

Source code here을 찾을 수 있습니다.

Unsplash에 있는 Solé Bicycles의 사진

자원

XState Docs

XState Visualizer

XState Tutorials



BLOG
NEWSLETTER
GITHUB

CODEPEN