React 및 XState의 향후 상태 관리

소셜 미디어에서 가장 흔히 볼 수 있는 정부 관리 방식을 묻는 여론 조사를 자주 볼 수 있다.많은 경우, 옵션은 MobX나 Redux, React-context+Hooks, Recoil에만 한정되지만, 최근에는 XState도 있다.
다른 도구는 이미 널리 알려졌고 기본적으로 받아들여졌기 때문에 (뒷심이 없을 수도 있고, 그것도 새것이기 때문에) XState는 대부분의 개발자들에게 여전히 상대적으로 알 수 없다.

Note: The purpose of this post is not to compare XState to other state management tools, but rather to tell about the problem it solves and give you a quick introduction, so you can jump and start learning by yourself.

따라서 더 이상 말할 필요가 없다. 내가 너에게 XState에 대한 정보를 더 많이 알려줄게.

XState란 무엇입니까?

XState는 Javascript와 Typescript 세계에 상태기를 가져오는 라이브러리입니다.상태기는 복잡한 체계를 묘사하는 수학 개념이다.그것을 신속하게 설명하기 위해서, 선과 화살표로 연결된 블록이 여러 개 있는 블록 모드를 상상해 보세요.이러한 블록은 응용 프로그램의 상태를 나타내고 화살표가 있는 선은 이 상태 사이의 흐름을 나타낸다.

첫 번째 블록에서 시작하면 연결된 블록으로만 전환할 수 있습니다.따라서 필요한 블록으로 변환하는 것을 자동으로 차단합니다.상태 정의를 사용하는 기계와 상태 사이의 전환이 가장 중요하고 상태 정의를 사용하는 기계와 상태 사이의 전환만 허용된다.
이제 우리는 이 유형을 포기하고 정확한 용어를 사용하자.
각 상태기는 다음과 같습니다.

제한된 수량의 상태(예: idle 또는 loading),

의 유한한 수량의 이벤트(예를 들어 { type: 'SEARCH' }은 상태 간의 전환을 촉발할 수 있다).

이 정의한 변환 목록은'어떤 이벤트를 지정하면 빈 상태에서 마운트 상태로 바뀐다'는 뜻이다.

또한 각 상태기에는 다음과 같은 기능이 있습니다.

기계 내부에 저장된 데이터 상하문,

최종 상태, 이후 기계 정지

네, 그래서 컨디션기가 뭔지 알아요.그러나 디자인된 모델을 보면 기계로 보기 쉽다.사람들이 어떻게 기계 같은 것을 생각하고 XState로 그것을 작성하는지 살펴봅시다.

상태기의 형식으로 일반 사물을 묘사하다

물 생각해봐.그냥 물만.그것의 행위는 어떻습니까?만약 우리가 액체 상태에서 시작한다면, 그것은 추울 때 얼고, 끓을 때 증발할 것이다.우리는 플라스마가 될 때까지 그것을 점점 더 가열할 수 있다.블록 모드에 적어 보겠습니다.

물이 플라스마로 변할 때, 우리는 그것을 더 이상 가열할 수 없다. 왜냐하면 그것은 더 이상 바꿀 수 없기 때문이다.우리는 그곳에서 그것을 동결할 수밖에 없다.만약 우리가 플라스마를 동결하기 시작한다면, 그것은 다시 기체로 변할 것이다.얼음도 마찬가지다.만약 물이 얼음의 형식이라면 우리는 더 이상 그것을 냉동할 수 없다.우리는 그것을 가열할 수밖에 없다.
만약 네가 자세히 관찰한다면, 너는 물이 최종 형태가 없다는 것을 발견할 수 있을 것이다.우리는 항상 그것의 상태 사이를 전환할 수 있다.XState로 구현하는 방법을 살펴보겠습니다.

import { Machine } from "xstate";

const waterMachine = Machine({
  initial: "liquid",
  states: {
    ice: {
      on: {
        HEAT: {
          target: "liquid",
        },
      },
    },
    liquid: {
      on: {
        HEAT: {
          target: "gas",
        },
        FREEZE: {
          target: "ice",
        },
      },
    },
    gas: {
      on: {
        HEAT: {
          target: "plasma",
        },
        FREEZE: {
          target: "liquid",
        },
      },
    },
    plasma: {
      on: {
        FREEZE: {
          target: "gas",
        },
      },
    },
  },
});

우리는 Machine 창설자를 가져와 기계의 대상에 전달해야 한다.기계의 대상은 states속성이 있는데 우리는 그 중에서 상태를 정의한다.모든 상태에서 우리는 on 속성을 놓을 수 있으며 이 속성은 에서 정의한 이벤트를 처리할 수 있다.
이벤트 처리 프로그램은 target 속성을 다른 상태로 설정할 수 있는 대상이다.이는 HEAT상태의 ice사건이 발생할 때 기계가 ice상태에서 liquid상태로 전환된다는 것을 의미한다.
이 해석은 듣기에는 매우 복잡할 수도 있지만, 코드를 자세히 연구해 보면 매우 간단하다는 것을 발견할 수 있을 것이다.

XState를 React와 함께 사용

XState는 Javascript 라이브러리로서 프레임과 관련이 없음을 의미합니다.그러나 React 하면 XState는 React 구성 요소에서 정의된 상태기를 사용하는 갈고리를 제공합니다.우리가 해야 할 일은 그것을 호출하는 것이다. 그리고 우리는 다음과 같은 속성에 접근할 수 있다.

기계 및 그 데이터의 현재 상태를 나타내는

send, 이벤트를 기계에 보내는 함수

그것만 있으면 너는 부품 내부에서 너의 기계를 사용할 수 있다.현재 상태(예를 들어 상태에 따라 다른 구성 요소를 보여주는 것)를 읽을 수 있고, 상하문(데이터 표시용)을 읽을 수 있으며, 이 기계에 이벤트를 보낼 수 있다(상태 간 전환).
React 애플리케이션에서 우리의 정수기 사용법을 살펴보기만 하면 됩니다.

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

// use hooks inside your component
const [state, send] = useMachine(waterMachine);

console.log(current.value)
// 'liquid' 

// send event for making a transition
send("HEAT")

console.log(current.value)
// 'gas' 

간편한 프로토타입 설계 및 디버깅

XState로 구성된 상태기는 XState Viz을 통해 시각화할 수 있습니다.이 훌륭한 도구는 디버깅, 실시간 미리보기, 상호작용 등 기계에서 많은 일을 할 수 있게 해 준다.우리가 어떻게 수상태기와 상호작용하는지 보자.

상태기로 복잡한 시스템을 설계하다

대형 웹 응용 프로그램을 고려할 때, 우리 개발자들은 통상적으로 거대하고 복잡한 기능을 도입한다.일부 구성 요소는 십여 개 또는 수백 개의 하위 구성 요소로 구축되었고, 이러한 하위 구성 요소 내부에도 논리가 있다.이를 위해 건전한 국가 관리 체계를 세우는 것은 까다로울 수도 있다.다행히도 컨디션기는 이런 상황에 매우 적합하다.
상태기는 블록 모드의 단일 블록과 비슷할 수 있다.응용 프로그램에는 여러 개의 상호 통신 상태기가 있을 수 있다.또한 주 상태기를 가지고 다른 상태기를 제어하고 이 통신을 사용할 수 있습니다.
다중 상태기에 중첩된 모든 논리는 나중에 XState Viz로 시각화할 수 있으며 대화형입니다.당신의 PM에 있어서 이것은 얼마나 큰 상업적 가치입니까!
내가 보기에 이것은 상태기가 다른 상태 관리 도구에 비해 가장 가치 있는 장점이다. 이것은 상태 관리에 사용되는 라이브러리가 아니다.그것은 업무 논리를 설계하고 통제하는 새로운 생태계이다.

XState와의 지속적인 협력

XState의 개념에 대해 자세히 알고 싶으시면 official XState documentation을 방문하시기 바랍니다.서류를 또렷하게 써서 읽기에 편리하다.문서를 읽는 것보다 동영상 자원을 더 좋아하는 사람들에게 저는 입문 과정을 준비했습니다. Udemy-Introduction to State Machines with XState and React에서 찾을 수 있습니다.
오래 버텨줘서 고마워!만약 당신이 최신 과학 기술 뉴스에 관심이 있다면, 당신은 나의 계좌를 주목할 수 있습니다. 왜냐하면 나는 정기적으로 이곳에 글을 올릴 계획이기 때문입니다.나도 정기적으로 트위터를 보낼 테니 너도 주목할 수 있어!
이 게시물은 최초로 나의 personal blog에 발표되었다.거기서도 확인하십시오.)
또한 프로덕션에서 XState를 사용한 적이 있다면 의견을 제시해 주십시오!