공식 문서를 번역한 내용입니다.
Introduction to state machines and statecharts | XState Docs
Introduction to state machines and statecharts Statecharts are a visual language used to describe the states in a process. You may have used similar diagrams in the past to design user flows, plan databases or map app architecture. Statecharts are another
xstate.js.org
상태 차트는 프로세스의 상태를 설명하는 데 사용되는 시각적 언어입니다.
과거에 유사한 다이어그램을 사용하여 사용자 흐름을 설계하거나 데이터베이스를 계획하거나 앱 아키텍처를 매핑해본 경험이 있을 수 있습니다.
상태 차트는 상자와 화살표를 사용하여 앱 논리의 흐름을 나타내는 하나의 방법이면서,
XState와 함께라면 애플리케이션의 논리를 제어하는 데 사용할 수 있는 실행 코드이기도 합니다.
States(상태)
상태는 둥근 사각형 상자로 표시됩니다.
멍멍이의 프로세스에 대한 상태 차트를 그릴 때 가장 먼저 떠오르는 두 가지 상태가 있습니다.
멍멍이는 자거나 깨어있습니다.
강아지는 잠자는 상태 혹은, 깨어 있는 상태 둘 중 하나의 상태만 취합니다.
강아지는 동시에 자면서 깨어 있을 수 없으며, 잠자지 않으면서 깨어있지 않을 수 없습니다.
이 두 가지 상태, 정확히 제한되고 유한한 수의 상태만 있습니다.
Transitions and events(전환과 이벤트)
강아지가 잠든 상태와 깨어 있는 상태 사이를 이동하는 방법은 상태의 전환입니다.
프로세스 순서에서 한 상태에서 다음 상태를 가리키는 화살표로 상징됩니다.
전환은 상태 변경을 초래하는 이벤트로 인해 발생합니다. 전환은 해당 이벤트로 레이블이 지정됩니다.
전환을 통해 상태를 이동합니다.
전환 및 이벤트는 결정적(deterministic)입니다.
결정적이란 각 전환 및 이벤트가 항상 동일한 다음 상태를 가리키며, 프로세스가 실행될 때마다 주어진 시작 조건에서 항상 동일한 결과를 생성한다는 것을 의미합니다.
강아지는 일어면서 잠든 상태에 빠지지 않으며, 잠에 들면서 깨어있는 상태가 되지 않습니다.
Initial state(초기 상태)
상태가 있는 모든 프로세스는 상태를 변경하는 이벤트가 발생할 때까지 기본 상태인 초기 상태를 갖습니다.
초기 상태는 초기 상태를 가리키는 화살표가 있는 채워진 원으로 표시됩니다.
초기 상태
Final state(종료 상태)
상태가 있는 대부분의 프로세스는 종료 상태, 즉 프로세스가 완료될 때의 마지막 상태를 갖습니다.
종료 상태는 상태의 둥근 사각형 상자에 이중 테두리로 표시됩니다.
강아지 산책 상태 차트에서 종료 상태는 산책 완료입니다.
산책 완료!
Compound states(복합 상태)
복합 상태는 하위 상태라고도 하는 더 많은 상태를 포함할 수 있는 상태입니다.
이러한 하위 상태는 상위 복합 상태가 발생하는 경우에만 발생할 수 있습니다.
걷는 상태 안에는 좋은 냄새를 맡기 위해 걷고, 뛰고, 멈추는 자식 상태가 있을 수 있습니다.
복합 상태는 하위 상태에 대한 컨테이너 역할을 하는 레이블이 지정된 둥근 사각형 상자로 표현됩니다.
걷는 중 상태는 여러개의 다른 상태로 표시될 수 있습니다.
복합 상태는 또한 어떤 자식 상태가 초기 상태인지 지정해야 합니다. 걷기 복합 상태에서 초기 상태는 walking입니다.
복합 상태는 상태 차트를 일상적인 상태 시스템보다 더 복잡한 상태를 처리할 수 있게 해줍니다.
Atomic states(원자적 상태)
원자 상태는 자식 상태가 없는 상태입니다.
기다림, 걷기 완료, 걷기, 달리기, 좋은 냄새 맡기는 모두 원자 상태입니다.
(Waiting, walk complete, walking, running, stopping to sniff good smells)
Parallel states(병렬 상태)
병렬 상태는 영역(region)이라고도 하는 모든 하위 상태가 동시에 활성화되는 복합 상태입니다.
영역은 점선으로 복합 상태 컨테이너 내부에서 구분됩니다.
걷기 복합 상태 내부에는 두 개의 영역이 있을 수 있습니다.
한 영역에는 강아지가 좋은 냄새를 맡기 위해 걷고, 뛰고, 멈추는 등, 강아지의 활동과 관련한 자식 상태가 포함되어 있고
다른 영역에는 꼬리와 관련한, 강아지의 꼬리를 흔드는 것과 흔들지 않는 상태가 포함되어 있습니다.
강아지는 걷고 꼬리를 흔들거나, 달리고 꼬리를 흔들거나, 꼬리를 흔들면서 멈추고 코를 킁킁거리며,
꼬리를 흔들지 않고도 이러한 모든 활동을 할 수 있습니다.
즉 상태의 가능성이 곱셈입니다. 병렬 상태는 양 쪽의 상태가 각각 가능합니다.
두 영역 모두 초기 상태인 자식 상태도 지정해야 합니다. 꼬리 영역의 초기 상태는 "흔들지 않음" 입니다. (not wagging.)
Self-transition(자기 전환)
자기 전환은 이벤트가 발생했지만 전환이 동일한 상태로 되돌아가는 경우입니다.
전환 화살표는 종료하고 동일한 상태로 다시 들어갑니다.
자기 전환을 설명하는 유용한 방법은 그 프로세스에서 "어딘가에 가지 않고 무언가를 하는 것"입니다.
강아지의 조르기 프로세스에는 "간식 얻기"이벤트가 있는 조르기 상태가 있습니다.
그리고 음식을 좋아하는 강아지는 "간식 얻기" 이벤트를 몇 번을 거쳐도 조르기 상태로 돌아갑니다.
간식 달라고 계속 조르기!
Planning statecharts (상태 차트를 이용해 기획하기)
상태 차트의 이점 중 하나는 상태 차트를 함께 구성하는 과정에서 프로세스의 가능한 모든 상태를 탐색할 수 있다는 것입니다.
이 탐색은 모든 상황을 다룰 가능성이 더 높기 때문에 코드의 버그와 오류를 피하는 데 도움이 됩니다.
상태 차트는 실행 가능하기 때문에 다이어그램과 코드로 모두 작동할 수 있으므로 다이어그램 작성 환경과 코딩 환경 간에 해석상의 차이점이나 버그가 발생할 가능성이 줄어듭니다.
Planning a statechart for a login machine (논리 기계를 위해 상태차트 기획하기)
로그인 시스템에 대한 상태 차트를 그리려면 프로세스의 기본 이벤트를 나열하는 것으로 시작합니다.
로그인 프로세스가 수행할 작업에 대해 생각해 보십시오.
그런 다음 해당 이벤트의 결과로 존재하는 상태를 나열합니다.
일부 이벤트와 상태가 있으면 상태 차트를 만들 수 있습니다.
간단한 상태 차트
초기 상태를 잊지 마십시오.
이 경우 로그아웃 상태는 모든 새 사용자가 로그아웃 프로세스에 올 것이기 때문에 초기 상태입니다.
Delayed transitions(지연된 전환)
일부 로그인 및 로그아웃 프로세스는 보안 조치로 고정된 시간 후에 비활성 사용자를 로그아웃합니다.
활성(active) 및 유휴(idle) 상태는 사용자가 로그인한 경우에만 발생하므로 로그인 복합 상태 내의 하위 상태가 됩니다.
활성, 유휴상태는 로그인의 하위상태
로그인 복합 상태 내부의 초기 상태는 로그인 이벤트의 직접적인 결과로 발생하기 때문에 활성이며 로그인은 사용자 활동의 표시입니다.
지연된 전환은 지정된 시간 후에 발생하는 전환 타입입니다.
지연된 전환은 "after"로 레이블이 지정되고 다음 표시된 상태로 전환하기 전에 얼마나 많은 시간이 경과해야 하는지를 나타내는 고정 기간이 지정됩니다.
로그인 상태 차트에서 60000밀리초 또는 1분의 지연된 전환이 활성 상태를 따라가며 사용자가 유휴 상태인지 확인합니다.
1분이 지나 전환하기 전에 활동(activity) 이벤트가 있으면 프로세스가 활성 상태로 돌아갑니다.
유휴가 3분 유지되면 강제 로그아웃! active후 1분 뒤면 자동으로 idle 되지만, activity가 있으면 다시 active 상태로!
사용자가 유휴 상태를 유지하는 경우, 180000밀리초 또는 3분의 지연된 전환이 현재 상태를 유휴 상태에서 자동 로그아웃 상태로 전환합니다.
Actions (액션 - 부수효과)
상태 차트는 상태 차트 외부의 시스템에서 액션을 시작하는 데 사용됩니다.
액션을 일반적으로 효과(effect) 또는 부작용(side-effects)이라고도 합니다. "부작용"은 부정적이거나 중요하지 않은 용어처럼 들리지만
액션를 취하는 것이 상태 차트를 사용하는 주요 목적입니다.
주 : 함수 인자 및 내부의 값이 리턴값을 만드는 행위 이외에 쓰이면 (side)effect라 함
action은 나머지 시퀀스에 영향이나 결과가 없는 이벤트이며
action 이벤트는 즉시 트리거되고, 시퀀스는 액션과 상관 없이 프로세스의 다음 단계로 이동할 수 있습니다.
예를 들어 로그인 상태 차트는 사용자 인터페이스를 변경하는 작업을 실행할 수 있습니다.
active 상태 진입 시, after 1 minute 액션은 바로 트리거되지만, 즉시 시퀀스에 영향을 주진 않습니다.
상태에 들어가거나 나올 때 또는 전환 시 액션이 시작될 수 있습니다.
상태에 대한 액션은 상태에 들어갈 때 또는 상태에서 나갈 때 액션을 시작해야 하는지 여부에 따라
"entry /" 또는 "exit /" 레이블이 있는 상태의 컨테이너 내부에 포함됩니다.
로그인 상태 차트에는 사용자가 강제 로그아웃 당할 수 있음을 경고하는, 유휴 상태 진입 시 발생하는 경고 액션이 있습니다.
idle 상태 진입(entry)시 경고 발생!
