--- id: wiki-2026-0508-flushsync title: flushSync category: 10_Wiki/Topics status: needs_review canonical_id: self aliases: [] duplicate_of: none source_trust_level: A confidence_score: 0.92 tags: [uncategorized] 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 --- # [[flushSync|flushSync]] ## πŸ“Œ ν•œ 쀄 톡찰 (The Karpathy Summary) `flushSync`λŠ” [[React 18|React 18]]μ—μ„œ λ„μž…λœ API둜, Reactκ°€ μƒνƒœ μ—…λ°μ΄νŠΈλ₯Ό 즉각적이고 λ™κΈ°μ μœΌλ‘œ κ°•μ œ μ μš©ν•˜λ„λ‘ λ§Œλ“œλŠ” λ©”μ„œλ“œμž…λ‹ˆλ‹€ [1-3]. 이 λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ React 18의 κΈ°λ³Έ λ™μž‘μΈ μžλ™ λ°°μΉ­([[Automatic Batching|Automatic Batching]])μ—μ„œ μ˜ˆμ™Έμ μœΌλ‘œ λ²—μ–΄λ‚˜ μ¦‰μ‹œ λ¦¬λ Œλ”λ§μ„ μœ λ°œν•  수 μžˆμŠ΅λ‹ˆλ‹€ [2, 3]. κ·ΈλŸ¬λ‚˜ κ³Όλ„ν•˜κ²Œ μ‚¬μš©ν•  경우 배칭을 ν†΅ν•œ μ„±λŠ₯ ν–₯상 이점을 λ¬΄νš¨ν™”ν•  수 μžˆμœΌλ―€λ‘œ, DOM μΈ‘μ •μ΄λ‚˜ 즉각적인 폼 μ—…λ°μ΄νŠΈμ²˜λŸΌ ν•„μˆ˜μ μΈ κ²½μš°μ—λ§Œ μ œν•œμ μœΌλ‘œ μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€ [2, 4]. ## πŸ“– κ΅¬μ‘°ν™”λœ 지식 (Synthesized Content) * **κ°œλ… 및 μ—­ν• :** React 18λΆ€ν„°λŠ” μ„±λŠ₯ μ΅œμ ν™”λ₯Ό μœ„ν•΄ μ—¬λŸ¬ μƒνƒœ μ—…λ°μ΄νŠΈλ₯Ό 단일 λ¦¬λ Œλ”λ§μœΌλ‘œ λ¬ΆλŠ” μžλ™ λ°°μΉ­(Automatic [[Batching|Batching]])이 기본적으둜 μ μš©λ©λ‹ˆλ‹€ [5-7]. ν•˜μ§€λ§Œ ReactDOM에 ν¬ν•¨λœ `flushSync()` λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ 이 μžλ™ 배칭을 μ˜λ„μ μœΌλ‘œ 우회(Opt-out)ν•˜μ—¬, νŠΉμ • μƒνƒœ μ—…λ°μ΄νŠΈ μ‹œ Reactκ°€ μ—…λ°μ΄νŠΈλ₯Ό λ™κΈ°μ μœΌλ‘œ μ²˜λ¦¬ν•˜κ³  μ¦‰μ‹œ λ¦¬λ Œλ”λ§ν•˜λ„λ‘ κ°•μ œν•  수 μžˆμŠ΅λ‹ˆλ‹€ [1, 3]. * **μ μ ˆν•œ μ‚¬μš© 사둀(Use Cases):** `flushSync`λŠ” μ‚¬μš©μžκ°€ λ³€κ²½ 사항을 μ§€μ—° 없이 μ¦‰κ°μ μœΌλ‘œ 보아야 ν•˜λŠ” 맀우 κΈ΄κΈ‰ν•œ μ—…λ°μ΄νŠΈμ— μ‚¬μš©λ©λ‹ˆλ‹€ [2]. * μ‚¬μš©μžμ˜ μž…λ ₯ 지연을 λ°©μ§€ν•˜κΈ° μœ„ν•΄ 폼(Form) 값을 μ¦‰μ‹œ μ—…λ°μ΄νŠΈν•  λ•Œ [2]. * μƒνƒœ λ³€κ²½ 직후 νŠΉμ • DOM μš”μ†Œμ— 포컀슀(Focus)λ₯Ό μ£Όκ±°λ‚˜, DOM μš”μ†Œμ˜ 크기/μœ„μΉ˜λ₯Ό μΈ‘μ •(Measure)ν•΄μ•Ό ν•  λ•Œ [2]. * **μ‚¬μš© 방법:** μƒνƒœ μ—…λ°μ΄νŠΈ λ‘œμ§μ„ λž˜ν•‘ν•˜μ—¬ μ‚¬μš©ν•©λ‹ˆλ‹€. (예: `flushSync(() => { setValue(''); });`) [2]. * **μ„±λŠ₯ κ΄€λ ¨ μ£Όμ˜μ‚¬ν•­:** μžλ™ 배칭은 λ Œλ”λ§ 횟수λ₯Ό 쀄여 μ„±λŠ₯을 ν–₯μƒμ‹œν‚€λŠ” 핡심 κΈ°λŠ₯μ΄λ―€λ‘œ, `flushSync`λ₯Ό λ‚¨μš©ν•˜λ©΄ μ΄λŸ¬ν•œ μ„±λŠ₯상 이점이 λ¬΄νš¨ν™”λ  수 μžˆμŠ΅λ‹ˆλ‹€ [4]. λ”°λΌμ„œ 가급적 λ“œλ¬Όκ²Œ(sparingly) μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€ [4]. ## πŸ”— 지식 μ—°κ²° (Graph) - **Related Topics:** [[Automatic Batching|Automatic Batching]], React 18, [[startTransition|startTransition]] - **Projects/Contexts:** DOM Element Measurement, Form Value Synchronization - **Contradictions/Notes:** React 18의 μƒνƒœ μ—…λ°μ΄νŠΈ μ œμ–΄ 방식 쀑 `flushSync`λŠ” μ—…λ°μ΄νŠΈλ₯Ό μ¦‰μ‹œ λ™κΈ°μ μœΌλ‘œ κ°•μ œ(Force synchronously)ν•˜λŠ” 반면, `[[startTransition|startTransition]]`은 μ—…λ°μ΄νŠΈλ₯Ό λΉ„κΈ΄κΈ‰(Non-urgent)으둜 μ§€μ •ν•˜μ—¬ 더 높은 μš°μ„ μˆœμœ„ μž‘μ—…(타이핑, 클릭 λ“±)에 메인 μŠ€λ ˆλ“œλ₯Ό μ–‘λ³΄ν•œλ‹€λŠ” μ μ—μ„œ μƒλ°˜λœ λͺ©μ μ„ κ°€μ§‘λ‹ˆλ‹€ [1, 2]. --- *Last updated: 2026-04-25* ## πŸ€– LLM ν™œμš© 힌트 (How to Use This Knowledge) **μ–Έμ œ 이 지식을 μ“°λŠ”κ°€:** - *(TODO)* **μ–Έμ œ μ“°λ©΄ μ•ˆ λ˜λŠ”κ°€:** - *(TODO)* ## πŸ§ͺ 검증 μƒνƒœ (Validation) - **정보 μƒνƒœ:** needs_review - **좜처 신뒰도:** 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: 무엇을 ν•˜λ©΄ μ•ˆ λ˜λŠ”κ°€ + 이유 + λŒ€μ‹  무엇을)*