--- id: FE-REACT-CONTEXT-001 category: "10_Wiki/๐Ÿ’ก Topics/AI" confidence_score: 1.0 tags: [react, context-api, state-management, prop-drilling, dependency-injection, performance] last_reinforced: 2026-04-26 --- # React Context API (๋ฆฌ์•กํŠธ ์ปจํ…์ŠคํŠธ API) ## ๐Ÿ“Œ ํ•œ ์ค„ ํ†ต์ฐฐ (The Karpathy Summary) > "์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ์˜ ๊นŠ์€ ๊ณณ๊นŒ์ง€ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•œ 'Prop Drilling'์˜ ํ„ฐ๋„์„ ๋šซ๊ณ , ์ „์—ญ์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ํ•„์š”ํ•œ ๊ณณ์—์„œ ์ฆ‰์‹œ ๊ตฌ๋…ํ•  ์ˆ˜ ์žˆ๋Š” ์งํ†ต ๋ผ์ธ์„ ๊ฐœ์„คํ•˜๋ผ" โ€” ์ค‘์ฒฉ๋œ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ๋ฐ์ดํ„ฐ ๊ณต์œ ๋ฅผ ๋‹จ์ˆœํ™”ํ•˜๋Š” React ๋‚ด์žฅ ์ƒํƒœ ๊ด€๋ฆฌ ๋ฉ”์ปค๋‹ˆ์ฆ˜. ## ๐Ÿ“– ๊ตฌ์กฐํ™”๋œ ์ง€์‹ (Synthesized Content) - **์ถ”์ถœ๋œ ํŒจํ„ด:** "Implicit Dependency Injection" โ€” ๋ช…์‹œ์ ์œผ๋กœ props๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋Œ€์‹ , Provider๋ฅผ ํ†ตํ•ด ์ƒ์œ„ ํŠธ๋ฆฌ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ œ๊ณตํ•˜๊ณ  Consumer(๋˜๋Š” `useContext`)๋ฅผ ํ†ตํ•ด ํ•˜์œ„ ํŠธ๋ฆฌ ์–ด๋””์—์„œ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ์†Œ๋น„ํ•˜๋Š” ํŒจํ„ด. - **์ฃผ์š” ํ™œ์šฉ ์‚ฌ๋ก€:** - **Theming:** ๋ผ์ดํŠธ/๋‹คํฌ ๋ชจ๋“œ ๋“ฑ UI ํ…Œ๋งˆ ์ •๋ณด ๊ณต์œ . - **Authentication:** ์‚ฌ์šฉ์ž ๋กœ๊ทธ์ธ ์ƒํƒœ ๋ฐ ๊ถŒํ•œ ์ •๋ณด ์œ ์ง€. - **Localization:** ์–ธ์–ด ์„ค์ • ๋ฐ ๋ฒˆ์—ญ ํ•จ์ˆ˜ ์ œ๊ณต. - **์ฃผ์˜์‚ฌํ•ญ ๋ฐ ํ•œ๊ณ„:** - **Re-rendering Issue:** Context ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜๋ฉด ํ•ด๋‹น Context๋ฅผ ๊ตฌ๋…ํ•˜๋Š” ๋ชจ๋“  ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋จ. ์žฆ์€ ์—…๋ฐ์ดํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ์ƒํƒœ์—๋Š” ๋ถ€์ ํ•ฉ. - **Complexity:** ๋ฌด๋ถ„๋ณ„ํ•œ Context ์‚ฌ์šฉ์€ ์ปดํฌ๋„ŒํŠธ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ์ €ํ•ดํ•˜๋ฏ€๋กœ, ํ•ฉ๋ฆฌ์ ์ธ ์ˆ˜์ค€์˜ 'Prop Drilling'์ด๋‚˜ '์ปดํฌ๋„ŒํŠธ ํ•ฉ์„ฑ'๊ณผ ๊ท ํ˜•์„ ๋งž์ถฐ์•ผ ํ•จ. - **์˜์˜:** ์™ธ๋ถ€ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(Redux, Zustand ๋“ฑ) ์—†์ด๋„ ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ๊ฒฐํ•ฉ๋„๋ฅผ ๋‚ฎ์ถ”๊ณ  ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ๋‹จ์ˆœํ™”ํ•จ. ## โš ๏ธ ๋ชจ์ˆœ ๋ฐ ์—…๋ฐ์ดํŠธ (Contradictions & RL Update) - **๊ณผ๊ฑฐ ๋ฐ์ดํ„ฐ์™€์˜ ์ถฉ๋Œ:** ๊ณผ๊ฑฐ์—๋Š” Context API๋ฅผ '์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ ๋„๊ตฌ'๋กœ ํ™๋ณดํ–ˆ์œผ๋‚˜, ํ˜„๋Œ€ ์ •์ฑ…์€ '์˜์กด์„ฑ ์ฃผ์ž…(DI) ๋„๊ตฌ'๋กœ ๋ช…ํ™•ํžˆ ์ •์˜ํ•จ. ์„ฑ๋Šฅ ์ด์Šˆ๋กœ ์ธํ•ด ๋นˆ๋ฒˆํ•œ ์ƒํƒœ ๋ณ€๊ฒฝ์—๋Š” Zustand๋‚˜ Recoil ๊ฐ™์€ ์ „๋ฌธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ์„ ๊ถŒ์žฅํ•˜๋Š” ์ •์ฑ…์œผ๋กœ ์ „ํ–ฅํ•จ. - **์ •์ฑ… ๋ณ€ํ™”:** Antigravity ํ”„๋กœ์ ํŠธ๋Š” ์ •์ ์ธ ์ „์—ญ ๋ฐ์ดํ„ฐ(ํ…Œ๋งˆ, ์„ค์ •)์— ๋Œ€ํ•ด์„œ๋งŒ Context API ์‚ฌ์šฉ์„ ํ—ˆ์šฉํ•˜๋ฉฐ, ๋™์ ์ธ ๋น„์ฆˆ๋‹ˆ์Šค ์ƒํƒœ๋Š” ์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ์„ ์˜๋ฌดํ™”ํ•จ. ## ๐Ÿ”— ์ง€์‹ ์—ฐ๊ฒฐ (Graph) - [[React-Hooks|React-Hooks]], [[State-Management-Patterns|State-Management-Patterns]], [[Component-Composition|Component-Composition]], Performance-Optimization - **Raw Source:** 00_Raw/React Context API.md