---
type: snippet
tags: ['mermaid', 'state', 'react']
status: release
ctime: 2024-09-17
mtime: 2024-09-17
---

import { Blockquote } from '@components/Blockquote'

<Blockquote
  cite={{
    url: 'https://massimilianomirra.com/notes/expressive-components-in-vanilla-react-part-1-type-states',
    title: 'Expressive components in vanilla React, part 1: TypeStates',
  }}
>
  이 패턴이 "상태 머신"처럼 들린다면, 그리 놀랄 일도 아닙니다. 결국, 선택의
  문제는 상태 머신을 구축할지 말지가 아니라, 그것을 암시적으로 구축할지
  명시적으로 구축할지에 달려 있습니다.
</Blockquote>

```mermaid
stateDiagram-v2
  [*] --> Mounting

  Mounting --> AwaitingEmailInput
  Mounting --> AwaitingCodeInput

  AwaitingEmailInput --> SubmittingEmail

  SubmittingEmail --> AwaitingCodeInput
  SubmittingEmail --> AwaitingEmailInput

  AwaitingCodeInput --> SubmittingCode

  SubmittingCode --> Success
  SubmittingCode --> AwaitingCodeInput

  Success --> [*]
```

![](https://mermaid.ink/svg/pako:eNqFkktPhDAUhf8KuUsDZJjyKF2YGHVh4mycneKiQmUah5aUVh0J_93ymHFmDMqioed89_bkti3ksmBAoNFUsxtOS0Ur732ZCcd-BVcs11wK5_5hVMb16eLZ8bxLZyWN0FyUmRj1_X4wrz4o7ze3FeXbO1Eb_Qd0bVNMzEj9rh74tXmpuD4Ye_pMnmv9H3oc9TTGoclZil4_nsypM8F5zppm1p8dwVQ4QHbi4ELFlE1Y2OtqeyQDvWEVy4DY34Kqtwwy0VmOGi3XO5ED0cowF0xd_NwukFe6baxaUwGkhU8gXoCwH0RpmIQ4wmGyiFzYAQlj7CeLECNklyBNUdy58CWlbRH4SRJEcbBEC4QjZGuHfo-DOR7KCq6lWo3Pa3hlLihpys0UoPsGYNnNCQ)