React의 상태기 소개

선결 조건

이것은 주로 자바스크립트에 익숙하고 반응하는 것을 가정합니다.이런 기술의 입문 경험만 있으면 된다.
Redux, MobX 또는useReducer를 사용한 경험이 도움이 될 것입니다. 왜냐하면 어떤 개념은 매우 비슷하지만 여기에는 필요도 없고 상세하게 소개하지도 않기 때문입니다.React 연결을 사용하는 경험도 도움이 되지만 필요하지 않을 수도 있습니다.

소개

유한상태기는 수십 년 전에 처음으로 제기된 개념으로 말 그대로 기계의 수학 모델로 유한한 상태 중의 하나를 유지할 수 있다.이 아이디어는 UI 커뮤니티에서 큰 센세이션을 일으켰다. 모델링 구성 요소 상태의 효과적인 방법이다.
그것을 너의 드라이클리너로 상상해라.그것은 두 가지 상태 중 하나에 존재한다. 즉, 열거나 닫는 것이다.그것이 닫혔을 때, 그것은 뜨겁거나 회전해서는 안 된다.너는 이미 닫혔을 때 그것을 닫아서는 안 된다. 반대로도 마찬가지다.한 번에 한 가지 상태일 수 있습니다.
이 장면이 웹 UI와 어떻게 비슷한지 생각하고 있을 수도 있습니다.우리가 곧 만들 햄버거 메뉴는 열 수도 있고 닫을 수도 있다.형식은 보통 비어 있고, 채워져 있으며, 집중적이고, 모호하며, 다른 사람을 미치게 하는 복잡한 조합일 수 있다.

답으로 쓰는 상태기.

상태기는 많은 코드에서 이미 비교적 유행하는 개념인데, 그것들도 사용자 인터페이스에 적용됩니까?나는 그렇다고 생각한다.그 중의 몇 가지 장점에 대해 이야기합시다.

명칭 상태: 모든 상태는 식별하기 쉬운 명칭이 있는데 이것은 더 많은 문서 코드를 초래할 뿐만 아니라 프로젝트 초보자와 경험이 풍부한 프로그래머가 구성 요소가 하는 다른 일을 쉽게 동화시키는 데 도움을 줄 수 있다.

명명 작업: 사용자가 한 상태에서 다른 상태로 전환할 때 할 수 있는 작업(예를 들어 양식 제출이나 특정 사용자가 클릭)을 고려할 수 있습니다.

제어 변환: 열려 있는 메뉴를 열거나 제출/제출 상태의 양식을 제출하는 등 변환 충돌과 관련된 오류를 제거할 수 있습니다.

일관된 상태 관리 - 애플리케이션에서 더 이상 다른 방식으로 상태를 업데이트하지 않습니다.상태 변환은 항상 Redux와 다른 방식으로 동작을 보내거나 스케줄링합니다.

더 복잡한 상태

너는 우리가 간단한 스위치를 끊고 끊는 것에 대해 토론하는 데 이미 많은 시간을 들였다고 생각할 것이다.소프트웨어는 이것보다 더 복잡하지, 그렇지?
물론 우리가 머지않아 사용할 상태기와 xstate 라이브러리는 이 점을 지원할 수 있다.우리의 건조기 유형으로 돌아가면, 높은 수준에서 기계가 실제로 켜져 있는지, 아니면 꺼져 있는지.그러나 이것은 분명히 이것보다 더 복잡하다.가열 부품은 반드시 열량을 유지해야 하며, 필요에 따라 열기, 가열, 닫기 사이를 전환해야 한다.건조기는 정밀하거나 고열과 같은 몇 가지 모드 중 하나에 있을 수 있으며, 이를 하위 상태로 볼 수 있으며, 가열된 컴포넌트는 평행 상태로 모델링할 수 있다.
나는 본문에서 상세하게 소개하지는 않겠지만, 이 방면에서 하늘은 유한하다.오늘 우리는 유한 상태기를 연구하고 간단한 전환기를 구축하여 열거나 닫을 수 있지만, 더 높은 용례에 대해서는
다른 모델, 예를 들어 층상태기나 병행상태기.

의존 항목 설치

React 및 React Dom 외에도 다음과 같은 종속성을 사용합니다.
Bulma - JavaScript 기반 CSS 프레임워크가 시작점을 제공합니다.
@xstate/react - 구성 요소 내에서 기계를 소모하는 데 사용할 연결을 제공합니다.
xstate - Dell의 상태기 구축을 위한 차트 지원

# NPM
$ npm install bulma @xstate/react xstate --save

# Yarn
$ yarn add bulma @xstate/react xstate

시작점

CodeSandbox에서든react 응용 프로그램 프로젝트를 만들든지, 시작점은 같습니다.우리는 Bulma 사이트의 다음 예시부터 우리에게 익숙한 햄버거 아이콘을 제공할 것이다.

import React from "react";

import "bulma/css/bulma.css";

export default function App() {
  return (
    <nav className="navbar" role="navigation" aria-label="main navigation">
      <div className="navbar-brand">
        <a className="navbar-item" href="#">
          Menu
        </a>

        <a
          role="button"
          className="navbar-burger burger"
          aria-label="menu"
          aria-expanded="false"
          data-target="navbarBasicExample"
        >
          <span aria-hidden="true" />
          <span aria-hidden="true" />
          <span aria-hidden="true" />
        </a>
      </div>

      <div id="navbarBasicExample" className="navbar-menu">
        <div className="navbar-start">
          <a className="navbar-item">Home</a>
          <a className="navbar-item">Documentation</a>
        </div>

        <div className="navbar-end">
          <div className="navbar-item">
            <div className="buttons">
              <a className="button is-primary">
                <strong>Sign up</strong>
              </a>
              <a className="button is-light">Log in</a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}

먼저 React를 가져오고 Bulma CSS를 가져온 다음 기능 구성 요소를 내보냅니다.

우리 상태기.

사용xstate의 과정의 시작은 우리의 기계를 구축하는 것이다.시스템은 라이브러리에 공개된 함수를 전달하는 JavaScript 객체로 구성됩니다.우선 app.js 상단에 추가 수입을 추가합니다.

import { useMachine } from "@xstate/react";
import { Machine } from "xstate";

그리고 우리는 다음 코드를 우리의 가져오기 아래에 직접 놓을 것이다.이것은 필수적인 것은 아니지만, 나는 기계 정의를 파일의 맨 위에 놓는 것이 매우 도움이 된다는 것을 발견했다.

const NavMachine = Machine({
  id: "toggleMenu",
  initial: "closed",
  states: {
    opened: {
      on: {
        TOGGLE: "closed"
      }
    },
    closed: {
      on: {
        TOGGLE: "opened"
      }
    }
  }
});

여기서 일어난 일을 분석해 봅시다.
우선, 우리는 기계에 ID를 줍니다. 이것은 유일한 식별자입니다. 우리는 그것을 toggleMenu라고 명명하기만 하면 됩니다.그리고 기계가 있는 초기 상태의 이름을 closed 로 지정합니다.states 속성은 상태 목록을 포함하고 두 대상을 각각'open'과'closed'라고 부른다.initial의 속성은 이 대상에 열거된 상태 중 하나와 일치해야 합니다.
방백: 우리의 예는 지금까지 끊겼다 이어졌다 하는 상태에 있지만 내가 분명히 하고자 하는 것은 유한상태기는 두 가지 옵션에만 국한될 필요가 없다는 것이다.xstate 문서에서 언급한 좋은 예는 신호등이다.주어진 시간에 녹색, 노란색 또는 빨간색만 있을 뿐 하나를 초과할 수 없습니다.그것은 영원히 주황색에서 녹색으로 변하거나 빨간색에서 주황색으로 변하지 않을 것이다.이러한 상태는 도로 아래에 설치된 타이머나 센서를 통해 전환된다.
각 상태 객체에는 활성 상태일 때 발생할 수 있는 작업 또는 이벤트 목록을 포함하는 on 속성도 포함됩니다.우리 양국의 상황에서 우리의 유일한 행동은 전환을 촉발하는 것이다."열기"상태가 되면 TOGGLE은 상태를closed로 설정하고,closed 상태는 반대로 설정합니다.
이것은 우리가 메뉴를 열 것인지 닫을 것인지를 실제적으로 표시하는 상태입니다.

기계는 가시화할 수 있다

이러한 기본적인 예는 필요하지 않을 수도 있지만, xstate 라이브러리의 경외스러운 장점은 위에서 우리 기계를 위해 작성한 코드를 xState visualizer에 직접 붙여서 상태와 흐름을 표시하는 흐름도를 얻을 수 있다는 것이다.

더욱 복잡한 기계에 대해 이것은 과도나 후방 근무 문제를 배제할 때 당신의 이성을 크게 절약할 수 있다.

기계를 소모하다

이 때문에 신기한 소스가 생겼다. 만약에 기계의 현재 상태도 우리 메뉴의 상태라면, React가 기계를 감지하고 기계 상태가 변화할 때 다시 렌더링할 수 있도록 어떻게 연결합니까?이것이 바로 useMachine이 제공한 @xstate/react 갈고리의 용무지이다.
먼저 주 app 함수의 반환 문장에 다음 코드를 추가합니다.

const [state, send] = useMachine(NavMachine);
const navbarClass = "navbar-menu " + (state.value === "opened" && "is-active");

만약 useReducer 갈고리에 익숙하다면, useMachine 작업 방식은 매우 비슷하다.기계에 전송한 다음 기계의 현재 상태를 나타내는 상태 대상과 새로운 동작을 보내는 함수를 되돌려줍니다.나는 보내는 것을 더 좋아한다. 왜냐하면 이것은 내가 문서에서 본 약속이지만, 나도 사람들이 사용하는 것을 보았기 때문이다dispatch.navbarClass는 보조 변수일 뿐, 상태가opened로 설정되면 is-active 클래스에 연결됩니다.state.value에는 현재 기계 상태의 이름이 포함되어 있습니다.우리는 지금 이런 것을 적당한 요소에 응용해야 한다.ID가 navbarBasicExample인 div 레이어를 찾아 다음으로 변경해야 합니다.

<div id="navbarBasicExample" className={navbarClass}>

이제 기계의 초기 상태를'닫기'에서'열기'로 바꾸어 실험할 수 있습니다. 햄버거 메뉴가 열리는 것을 볼 수 있을 것입니다.전체 브라우저를 사용하는 경우 창을 축소하거나 브라우저 개발 도구 이동 모의를 활성화해야 합니다.

스케줄링 작업

마지막 단계는 우리의 햄버거 아이콘을 장착하여 우리 기계의 상태를 전환하는 것이다.클래스a의navbar-burger를 찾고 다음 onClick 프로세서를 추가합니다.

<a
    role="button"
    className="navbar-burger burger"
    aria-label="menu"
    aria-expanded="false"
    data-target="navbarBasicExample"
    onClick={() => send("TOGGLE")}
>

이것은 기계에 TOGGLE 동작을 보낼 것입니다. 이 동작은 기계의 현재 상태에 따라 메뉴를 열거나 닫습니다.이 단추는 현재 프레젠테이션 항목에서 작동해야 합니다.

소스 코드

this CodeSandBox에서 전체 소스 코드를 찾을 수 있습니다.만약 당신의 메뉴가 예상대로 실행되지 않는다면, 둘 사이에 무엇이 다른지 한번 보세요.만약 네가 생각나지 않는다면, 언제든지 나에게 연락해 주십시오. 나는 기꺼이 당신을 도울 것입니다!

결론

비록 이것은 모든 UI 용례의 완벽한 해결 방안은 아니지만, 나는 상태기를 굳게 믿고, 그것들이 우리의 상태를 더욱 예측할 수 있고, 틀리기 쉽고, 이해하기 쉽고, 시각화하기 쉽고, 더욱 복잡한 구성 요소를 만들 수 있다고 생각한다.본문을 읽어 주셔서 감사합니다. 그리고 제 후속 글을 계속 보시고 플러그인 상태기와 병행 상태기를 토론해 주십시오.