React에서 간단한 상태 머신 구축

오늘의 목표는 XState 라이브러리를 시작하는 것입니다. XState는 유한 상태 머신을 구축하는 데 도움이 됩니다. 먼저 상태 머신을 구축한 다음 반응 앱에 통합합니다.

이미 흥분? 시작하자.
toggleStateMachine 및 active 두 상태 사이를 전환하는 inactive 머신이라는 매우 간단한 상태 머신으로 시작합니다.
다음은 상태 시스템에 대한 멋진 시각화 도우미와 상태 머신이 한 상태에서 다른 상태로 전환되는 방식입니다.

XState Visualizer

Visualizer 페이지에 있으면 처음부터 빌드할 것이므로 definitions 탭을 비웁니다.

변수를 정의합니다. 이 변수는 Machine() 의 인스턴스가 됩니다.

const toggleStateMachine = new Machine({})

이제 이 변수에 id를 부여해 보겠습니다. 이를 위해 변수 이름을 사용할 수도 있습니다.

const toggleStateMachine = new Machine({
id:'toggleStateMachine'
})

이제 상태 시스템에 초기 값을 지정해야 합니다. 이름에서 알 수 있듯이 시스템을 스핀업할 때 시스템의 초기 상태입니다. 우리는 토글 머신을 만들고 있기 때문에 active 및 inactive 두 가지 상태가 있습니다. 따라서 자연스럽게 초기 상태는 inactive 상태가 됩니다.

const toggleStateMachine = new Machine({
id:'toggleStateMachine',
initial:'inactive'
})

다음으로 이 시스템의 모든 상태를 정의합니다. states는 개체입니다. 우리는 이 기계가 가질 수 있는 모든 다른 속성states에 속성을 추가할 수 있습니다.

const toggleStateMachine = new Machine({
  id: "toggleStateMachine",
  initial: "inactive",
  states: {
    inactive: {},
    active: {}
  }
});

update 버튼을 클릭합니다. 짜잔!

이제 볼 수 있듯이 시스템이 시작되면 inactive 상태가 됩니다. 따라서 이벤트가 발생하면 inactive 상태가 active 상태로 변경되어야 합니다. 이것이 당신이하는 방법입니다.

const toggleStateMachine = new Machine({
  id: "toggleStateMachine",
  initial: "inactive",
  states: {
    inactive: {
      on: {
        TOGGLE: "active"
      }
    },
    active: {}
  }
});

on 속성은 수신해야 하는 이벤트를 초기 상태에 알려줍니다. 여기서 on 속성은 inactive 상태에 TOGGLE 이벤트를 수신해야 함을 알려줍니다.

마찬가지로 active 속성은 TOGGLE 이벤트를 수신해야 합니다. 따라서 active 상태에서 토글이 트리거되면 다시 inactive 상태로 전환되어야 합니다.

const toggleStateMachine = new Machine({
  id: "toggleStateMachine",
  initial: "inactive",
  states: {
    inactive: {
      on: {
        TOGGLE: "active"
      }
    },
    active: {
      on: {
        TOGGLE: "inactive"
      }
    }
  }
});

그게 다야!. 우리의 상태 머신은 React 애플리케이션에 통합될 준비가 되었습니다.

React Hooks를 사용한 간단한 구현.

import { useMachine } from '@xstate/react';

const toggleStateMachine = new Machine({
  id: "toggleStateMachine",
  initial: "inactive",
  states: {
    inactive: {
      on: {
        TOGGLE: "active"
      }
    },
    active: {
      on: {
        TOGGLE: "inactive"
      }
    }
  }
});

function Toggle() {
  const [current, send] = useMachine(toggleStateMachine);
  return (
    <button onClick={() => send('TOGGLE')}>
      {current.matches('inactive') ? 'Off' : 'On'}
    </button>
  );

}

더 읽어보기

글쎄요, 여러분!. 읽어 주셔서 감사합니다. 자세한 내용은 공식XState 문서를 참조하시기 바랍니다.