--- 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: 무엇을 ν•˜λ©΄ μ•ˆ λ˜λŠ”κ°€ + 이유 + λŒ€μ‹  무엇을)*