--- id: wiki-2026-0508-xstate-library title: XState Library category: 10_Wiki/Topics/Software Architecture status: verified canonical_id: self aliases: [ARCH-RES-2026-05-002] duplicate_of: none source_trust_level: A confidence_score: 0.99 tags: [xstate, fsm, statecharts, state-management, workflow, logic-orchestration] raw_sources: [] last_reinforced: 2026-05-08 github_commit: pending inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08) tech_stack: language: unspecified framework: unspecified --- # XState Library ## ๐Ÿ“Œ ํ•œ ์ค„ ํ†ต์ฐฐ (The Karpathy Summary) > "๋กœ์ง์˜ ์‹œ๊ฐ์  ๋ช…์„ธํ™”: ์œ ํ•œ ์ƒํƒœ ๊ธฐ๊ณ„(FSM)์™€ ์ƒํƒœ ์ฐจํŠธ(Statecharts) ์ด๋ก ์„ ๊ธฐ๋ฐ˜์œผ๋กœ, ๋ณต์žกํ•œ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง๊ณผ UI ์ƒํƒœ๋ฅผ ๋ช…์‹œ์ ์ธ ์ƒํƒœ ์ „์ด(State Transition)๋กœ ์ •์˜ํ•˜์—ฌ '๋ถˆ๊ฐ€๋Šฅํ•œ ์ƒํƒœ'๋ฅผ ์›์ฒœ์ ์œผ๋กœ ์ฐจ๋‹จํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ." ## ๐Ÿ“– ๊ตฌ์กฐํ™”๋œ ์ง€์‹ (Synthesized Content) * **์œ ํ•œ ์ƒํƒœ ๊ธฐ๊ณ„ (FSM)**: ์‹œ์Šคํ…œ์ด ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋Š” ์œ ํ•œํ•œ ์ƒํƒœ๋“ค์„ ์ •์˜ํ•˜๊ณ , ํŠน์ • ์ด๋ฒคํŠธ์— ์˜ํ•ด์„œ๋งŒ ์ƒํƒœ๊ฐ€ ์ „์ด๋˜๋„๋ก ๊ฐ•์ œํ•œ๋‹ค. ์ด๋Š” ์˜ˆ๊ธฐ์น˜ ๋ชปํ•œ ์ƒํƒœ ๋ณ€ํ™”๋กœ ์ธํ•œ ๋ฒ„๊ทธ๋ฅผ ๋ฐฉ์ง€ํ•˜๋Š” ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ๋‹ค. * **์ƒํƒœ ์ฐจํŠธ (Statecharts)**: ๋‹จ์ˆœํ•œ FSM์˜ ํ•œ๊ณ„๋ฅผ ๋„˜์–ด ๊ณ„์ธต์  ์ƒํƒœ(Nested States), ๋ณ‘๋ ฌ ์ƒํƒœ(Parallel States), ํžˆ์Šคํ† ๋ฆฌ ์ƒํƒœ ๋“ฑ์„ ์ง€์›ํ•œ๋‹ค. ๋ณต์žกํ•œ ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ๋ชจ๋“ˆํ™”ํ•˜๊ณ  ์‹œ๊ฐํ™”(`XState Stately`)ํ•˜๋Š” ๋ฐ ์ตœ์ ํ™”๋˜์–ด ์žˆ๋‹ค. * **Actor Model ๊ธฐ๋ฐ˜**: XState V5๋ถ€ํ„ฐ๋Š” ๊ฐ ์ƒํƒœ ๊ธฐ๊ณ„๋ฅผ ๋…๋ฆฝ์ ์ธ '์•กํ„ฐ(Actor)'๋กœ ์ทจ๊ธ‰ํ•˜์—ฌ ์„œ๋กœ ๋ฉ”์‹œ์ง€๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ๋ถ„์‚ฐ ์‹œ์Šคํ…œ ๊ตฌ์กฐ๋ฅผ ์ฑ„ํƒํ•œ๋‹ค. ์ด๋Š” ๋งˆ์ดํฌ๋กœ ํ”„๋ก ํŠธ์—”๋“œ๋‚˜ ๋ณต์žกํ•œ ์—์ด์ „ํŠธ ์‹œ์Šคํ…œ ์„ค๊ณ„์— ๋งค์šฐ ์œ ๋ฆฌํ•˜๋‹ค. ## โš–๏ธ ํŠธ๋ ˆ์ด๋“œ์˜คํ”„ ๋ฐ ๊ณ ๋ ค์‚ฌํ•ญ * **๋†’์€ ์ดˆ๊ธฐ ํ•™์Šต ๊ณก์„ **: FSM๊ณผ Statecharts ์ด๋ก ์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ํ•„์š”ํ•˜๋ฉฐ, JSON ๊ธฐ๋ฐ˜์˜ ์ •์˜ ๋ฐฉ์‹์ด ์ฒ˜์Œ์—๋Š” ์ƒ์†Œํ•˜๊ณ  ๋ฒˆ๊ฑฐ๋กœ์šธ ์ˆ˜ ์žˆ๋‹ค. * **์—„๊ฒฉํ•จ vs ์œ ์—ฐ์„ฑ**: ๋ชจ๋“  ์ƒํƒœ๋ฅผ ๋ฏธ๋ฆฌ ์ •์˜ํ•ด์•ผ ํ•˜๋ฏ€๋กœ ๋น ๋ฅธ ํ”„๋กœํ† ํƒ€์ดํ•‘์—๋Š” ๋ฐฉํ•ด๊ฐ€ ๋  ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ์žฅ๊ธฐ์ ์ธ ์œ ์ง€๋ณด์ˆ˜์™€ ์‹ ๋ขฐ์„ฑ์ด ์ค‘์š”ํ•œ ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ์••๋„์ ์ธ ์ด์ ์„ ์ œ๊ณตํ•œ๋‹ค. * **ํ†ตํ•ฉ ๋น„์šฉ**: React, Vue ๋“ฑ UI ํ”„๋ ˆ์ž„์›Œํฌ์™€ ๊ฒฐํ•ฉํ•  ๋•Œ `useMachine` ๊ฐ™์€ ํ›…์„ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋ฉฐ, ๊ธฐ์กด์˜ ๋‹จ์ˆœํ•œ `useState` ๋ฐฉ์‹๋ณด๋‹ค ์ฝ”๋“œ ์–‘์ด ๋Š˜์–ด๋‚  ์ˆ˜ ์žˆ๋‹ค. ## ๐Ÿ”— ์ง€์‹ ์—ฐ๊ฒฐ (Graph) - **์œ ์‚ฌ ๊ฐœ๋…**: [[แ„‘แ…ณแ„…แ…ฉแ†ซแ„แ…ณแ„‹แ…ฆแ†ซแ„ƒแ…ณ_แ„†แ…ตแ†พ_UIUX_แ„‘แ…ญแ„Œแ…ฎแ†ซ|Redux]] - **๊ด€๋ จ ๊ธฐ์ˆ **: [[TypeScript]] --- *Last updated: 2026-05-08* ## ๐Ÿค– LLM ํ™œ์šฉ ํžŒํŠธ (How to Use This Knowledge) **์–ธ์ œ ์ด ์ง€์‹์„ ์“ฐ๋Š”๊ฐ€:** - *(TODO)* **์–ธ์ œ ์“ฐ๋ฉด ์•ˆ ๋˜๋Š”๊ฐ€:** - *(TODO)* ## ๐Ÿงช ๊ฒ€์ฆ ์ƒํƒœ (Validation) - **์ •๋ณด ์ƒํƒœ:** verified - **์ถœ์ฒ˜ ์‹ ๋ขฐ๋„:** A - **๊ฒ€ํ†  ์ด์œ :** *(P-Reinforce Phase 1 ์ž๋™ ์ •๊ทœํ™”. ๋ณธ๋ฌธ ๊ฒ€์ฆ ํ•„์š”.)* ## ๐Ÿงฌ ์ค‘๋ณต ๊ฒ€์‚ฌ (Duplicate Check) - **๊ธฐ์กด ์œ ์‚ฌ ๋ฌธ์„œ:** *(TODO: ์ธ๋ฑ์„œ ํด๋Ÿฌ์Šคํ„ฐ ๋ฆฌํฌํŠธ ์ฐธ์กฐ)* - **์ฒ˜๋ฆฌ ๋ฐฉ์‹:** UPDATE (์ž๋™ ์ •๊ทœํ™”) - **์ฒ˜๋ฆฌ ์ด์œ :** Phase 1 ์ •๊ทœํ™” โ€” ์˜› ํ…œํ”Œ๋ฆฟ/๋ˆ„๋ฝ ํ•„๋“œ ๋ณด๊ฐ•. ## โš ๏ธ ๋ชจ์ˆœ ๋ฐ ์—…๋ฐ์ดํŠธ (Contradictions & Updates) - **๊ณผ๊ฑฐ ๋ฐ์ดํ„ฐ์™€์˜ ์ถฉ๋Œ:** ์—†์Œ - **์ •์ฑ… ๋ณ€ํ™”:** ์—†์Œ ## ๐Ÿ•“ ๋ณ€๊ฒฝ ์ด๋ ฅ (Changelog) | ๋‚ ์งœ | ๋ณ€๊ฒฝ ๋‚ด์šฉ | ์ฒ˜๋ฆฌ ๋ฐฉ์‹ | ์‹ ๋ขฐ๋„ | |------|-----------|-----------|--------| | 2026-05-08 | P-Reinforce Phase 1 ์ •๊ทœํ™” (frontmatter + ํ—ค๋” ํ‘œ์ค€ํ™”) | UPDATE | A | ## ๐Ÿ’ป ์ฝ”๋“œ ํŒจํ„ด (Code Patterns) **ํŒจํ„ด 1:** *(TODO: ์ด ํ”„๋กœ์ ํŠธ ์ปจ๋ฒค์…˜ ๋ฐ˜์˜ํ•œ ๊ตฌ์กฐ ์Šค์ผˆ๋ ˆํ†ค)* ```text # TODO ``` ## ๐Ÿค” ์˜์‚ฌ๊ฒฐ์ • ๊ธฐ์ค€ (Decision Criteria) **์„ ํƒ A๋ฅผ ์จ์•ผ ํ•  ๋•Œ:** - *(TODO)* **์„ ํƒ B๋ฅผ ์จ์•ผ ํ•  ๋•Œ:** - *(TODO)* **๊ธฐ๋ณธ๊ฐ’:** > *(TODO)* ## โŒ ์•ˆํ‹ฐํŒจํ„ด (Anti-Patterns) - **[์•ˆํ‹ฐํŒจํ„ด]:** *(TODO: ๋ฌด์—‡์„ ํ•˜๋ฉด ์•ˆ ๋˜๋Š”๊ฐ€ + ์ด์œ  + ๋Œ€์‹  ๋ฌด์—‡์„)*