--- id: wiki-2026-0508-starttransition title: startTransition 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 --- # [[startTransition|startTransition]] ## ๐Ÿ“Œ ํ•œ ์ค„ ํ†ต์ฐฐ (The Karpathy Summary) `startTransition`์€ [[React 18|React 18]] ๋ฐ 19์—์„œ ๋„์ž…๋œ ๋™์‹œ์„ฑ ๋ Œ๋”๋ง(Concurrent Rendering) API๋กœ, ํŠน์ • ์ƒํƒœ ์—…๋ฐ์ดํŠธ๋ฅผ ๊ธด๊ธ‰ํ•˜์ง€ ์•Š์€(non-urgent) ์ž‘์—…์œผ๋กœ ํ‘œ์‹œํ•˜์—ฌ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๋‚ฎ์ถ”๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค [1-3]. ์ด๋ฅผ ํ†ตํ•ด ๋ฌด๊ฑฐ์šด ์ƒํƒœ ๋ณ€๊ฒฝ์ด๋‚˜ ๋ Œ๋”๋ง์ด ์ง„ํ–‰๋˜๋Š” ๋™์•ˆ์—๋„ ํƒ€์ดํ•‘์ด๋‚˜ ํด๋ฆญ ๊ฐ™์€ ๊ธด๊ธ‰ํ•œ ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ์ด ๋ฉ”์ธ ์Šค๋ ˆ๋“œ๋ฅผ ์ฐจ๋‹จ([[Blocking|Blocking]])ํ•˜์ง€ ์•Š๊ฒŒ ๋งŒ๋“ค์–ด UI์˜ ๋ฐ˜์‘์„ฑ์„ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค [1, 2]. ## ๐Ÿ“– ๊ตฌ์กฐํ™”๋œ ์ง€์‹ (Synthesized Content) - **๋™์‹œ์„ฑ ๋ Œ๋”๋ง๊ณผ ์ƒํƒœ ์—…๋ฐ์ดํŠธ ๋ถ„๋ฆฌ:** `startTransition`์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ƒํƒœ ์—…๋ฐ์ดํŠธ ๋กœ์ง์„ ์ง์ ‘ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์„ ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋ฉฐ, `set[[State|State]]` ํ˜ธ์ถœ์„ `startTransition` ๋‚ด๋ถ€์— ๋ž˜ํ•‘ํ•˜์—ฌ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค [4]. ์ด ๋ฐฉ์‹์€ ๊ธด๊ธ‰ํ•œ ์—…๋ฐ์ดํŠธ(ํƒ€์ดํ•‘, ํด๋ฆญ ๋“ฑ)์™€ ๊ธด๊ธ‰ํ•˜์ง€ ์•Š์€ ์—…๋ฐ์ดํŠธ(๋Œ€๊ทœ๋ชจ ๋ชฉ๋ก ํ•„ํ„ฐ๋ง, ์ž๋™์™„์„ฑ ๊ฒฐ๊ณผ ๊ฐ€์ ธ์˜ค๊ธฐ, ์ฐจํŠธ ์žฌ๊ณ„์‚ฐ ๋“ฑ)๋ฅผ ๋ถ„๋ฆฌํ•˜์—ฌ UI๊ฐ€ ๋ฉˆ์ถ”๊ฑฐ๋‚˜ ์–ผ์–ด๋ถ™๋Š” ํ˜„์ƒ์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค [1, 2]. - **์ž‘์—… ์šฐ์„ ์ˆœ์œ„ ์ œ์–ด:** `startTransition`์œผ๋กœ ๊ฐ์‹ธ์ง„ ์ƒํƒœ ์—…๋ฐ์ดํŠธ๋Š” ์‹œ์Šคํ…œ ๋‚ด์—์„œ ๋‚ฎ์€ ์šฐ์„ ์ˆœ์œ„(low-priority)๋กœ ์ทจ๊ธ‰๋ฉ๋‹ˆ๋‹ค [1, 3]. ๋”ฐ๋ผ์„œ React๋Š” ๊ธด๊ธ‰ํ•œ ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ์„ ๋จผ์ € ์ฒ˜๋ฆฌํ•˜๊ณ , ๋ฉ”์ธ ์Šค๋ ˆ๋“œ์— ์—ฌ์œ ๊ฐ€ ์ƒ๊ธธ ๋•Œ๊นŒ์ง€ ์ง€์—ฐ๋œ(non-urgent) ์—…๋ฐ์ดํŠธ๋ฅผ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ์ฒ˜๋ฆฌํ•˜๋ฉฐ ๋‹ค๋ฅธ ๊ณ ์šฐ์„ ์ˆœ์œ„ ์ž‘์—…์— ์‹คํ–‰์„ ์–‘๋ณด(yield)ํ•ฉ๋‹ˆ๋‹ค [1, 3]. - **๋””๋ฐ”์šด์‹ฑ(Debouncing)๊ณผ์˜ ๊ด€๊ณ„:** ์ปดํฌ๋„ŒํŠธ ์ˆ˜์ค€์—์„œ UI ์—…๋ฐ์ดํŠธ๋ฅผ ์ง€์—ฐ์‹œํ‚ค๋Š” ์ธก๋ฉด์—์„œ๋Š” ๋””๋ฐ”์šด์‹ฑ์˜ ํ›Œ๋ฅญํ•œ ๋Œ€์•ˆ์ด์ž React์˜ ๋ Œ๋”๋ง ๋ชจ๋ธ์— ๋” ์ž˜ ๋ถ€ํ•ฉํ•˜๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ์ ‘๊ทผ๋ฒ•์ž…๋‹ˆ๋‹ค [5]. ๋‹ค๋งŒ, ๋ถˆํ•„์š”ํ•œ API ํ˜ธ์ถœ ๋นˆ๋„ ์ž์ฒด๋ฅผ ์ค„์ด๋Š” ๊ฒƒ์ด ๋ชฉ์ ์ผ ๊ฒฝ์šฐ์—๋Š” ์—ฌ์ „ํžˆ ๋””๋ฐ”์šด์‹ฑ์ด ๊ฐ€์žฅ ์ ํ•ฉํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ๊ถŒ์žฅ๋ฉ๋‹ˆ๋‹ค [5]. - **[[flushSync|flushSync]]์™€์˜ ๋Œ€๋น„:** React 18์€ ์—…๋ฐ์ดํŠธ์˜ ์šฐ์„ ์ˆœ์œ„๋ฅผ ์ œ์–ดํ•˜๋Š” ๋„๊ตฌ๋กœ `startTransition`๊ณผ `flushSync`๋ฅผ ํ•จ๊ป˜ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค [2]. ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ๊ฐ’์„ ์ฆ‰์‹œ ํ™”๋ฉด์— ๋ฐ˜์˜ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ•์ œ๋กœ ๋™๊ธฐ์  ๋ Œ๋”๋ง์„ ์ ์šฉํ•ด์•ผ ํ•  ๋•Œ๋Š” `flushSync`๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ, ์—…๋ฐ์ดํŠธ๋ฅผ ๋’ค๋กœ ๋ฏธ๋ฃจ์–ด ๋†’์€ ์šฐ์„ ์ˆœ์œ„ ์ž‘์—…์— ๊ธธ์„ ๋‚ด์–ด์ค„ ๋•Œ๋Š” `startTransition`์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค [2, 3]. ## ๐Ÿ”— ์ง€์‹ ์—ฐ๊ฒฐ (Graph) - **Related Topics:** [[useTransition|useTransition]], flushSync, [[Concurrent Rendering|Concurrent Rendering]], Debouncing - **Projects/Contexts:** ๋Œ€๊ทœ๋ชจ ๋ฐ์ดํ„ฐ๊ฐ€ ํฌํ•จ๋œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ์˜ ํƒญ ์ „ํ™˜(tab switching), ํƒ€์ดํ•‘ํ•  ๋•Œ๋งˆ๋‹ค ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๋ฅผ ํ•„ํ„ฐ๋งํ•˜๋Š” ํŒจํ„ด([[Search|Search]]-as-you-type), ๊ทธ๋ฆฌ๊ณ  ์ˆ˜์ฒœ ๊ฐœ์˜ ํ•ญ๋ชฉ ํ•„ํ„ฐ๋ง ์‹œ ๋ฐœ์ƒํ•˜๋Š” ์ž…๋ ฅ ์ง€์—ฐ(input lag)์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ฃผ๋กœ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค [1, 2, 6]. - **Contradictions/Notes:** ์†Œ์Šค ์ž๋ฃŒ์—์„œ๋Š” ๋™์‹œ์„ฑ ํ›…(`startTransition`, `[[useTransition|useTransition]]` ๋“ฑ)์ด ์ฝ”๋“œ์˜ ๋ฌผ๋ฆฌ์ ์ธ ์‹คํ–‰ ์†๋„ ์ž์ฒด๋ฅผ ๋†’์—ฌ์ฃผ๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋ผ๊ณ  ๋ช…์‹œํ•ฉ๋‹ˆ๋‹ค [7]. ๋ฌด๊ฑฐ์šด ๊ณ„์‚ฐ์ด ์‚ฌ์šฉ์ž์˜ ์ฆ‰๊ฐ์ ์ธ ํ”ผ๋“œ๋ฐฑ์„ ๊ฐ€๋กœ๋ง‰์ง€ ์•Š๋„๋ก ํ•จ์œผ๋กœ์จ ์•ฑ์ด "๋” ๋น ๋ฅด๋‹ค๊ณ  ๋А๋ผ๊ฒŒ(feel faster)" ๋งŒ๋“ค์–ด ์ค„ ๋ฟ์ž…๋‹ˆ๋‹ค [7]. --- *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: ๋ฌด์—‡์„ ํ•˜๋ฉด ์•ˆ ๋˜๋Š”๊ฐ€ + ์ด์œ  + ๋Œ€์‹  ๋ฌด์—‡์„)*