--- id: P-REINFORCE-AUTO-3FAE48 category: "10_Wiki/๐Ÿ’ก Topics/Design & Experience" confidence_score: 0.90 tags: [auto-reinforced] last_reinforced: 2026-04-20 github_commit: "[P-Reinforce] Continuous Worker - React ์ƒํƒœ ๊ด€๋ฆฌ (React State Management)" --- # [[React แ„‰แ…กแ†ผแ„แ…ข แ„€แ…ชแ†ซแ„…แ…ต (React State Management)|React ์ƒํƒœ ๊ด€๋ฆฌ (React State Management)]] ## ๐Ÿ“Œ ํ•œ ์ค„ ํ†ต์ฐฐ (The Karpathy Summary) > React ์ƒํƒœ ๊ด€๋ฆฌ(React State Management)๋Š” ์‚ฌ์šฉ์ž ์ž…๋ ฅ, API ์‘๋‹ต, UI ์„ค์ • ๋“ฑ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋‚ด์—์„œ ์‹œ๊ฐ„์— ๋”ฐ๋ผ ๋ณ€ํ™”ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ถ”์ ํ•˜๊ณ  ์œ ์ง€ํ•˜๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค [1]. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํ™˜๊ฒฝ์˜ React์—์„œ๋Š” ๊ตฌ๋ถ„๋œ ์œ ๋‹ˆ์–ธ(Discriminated Unions)๊ณผ ๋ถˆ๋ณ€์„ฑ(Immutability) ํŒจํ„ด์„ ํ™œ์šฉํ•˜์—ฌ ์œ ํšจํ•˜์ง€ ์•Š์€ ์ƒํƒœ๋ฅผ ์›์ฒœ์ ์œผ๋กœ ์ฐจ๋‹จํ•˜๋Š” ๊ฒƒ์— ์ค‘์ ์„ ๋‘ก๋‹ˆ๋‹ค [2-4]. ์ „๋ฐ˜์ ์ธ React ์ž์ฒด์˜ ์ƒํƒœ ๊ด€๋ฆฌ ๋ฉ”์ปค๋‹ˆ์ฆ˜์ด๋‚˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ƒํƒœ๊ณ„์— ๋Œ€ํ•ด์„œ๋Š” ์†Œ์Šค์— ๊ด€๋ จ ์ •๋ณด๊ฐ€ ๋ถ€์กฑํ•ฉ๋‹ˆ๋‹ค. ## ๐Ÿ“– ๊ตฌ์กฐํ™”๋œ ์ง€์‹ (Synthesized Content) ์†Œ์Šค์— ๊ด€๋ จ ์ •๋ณด๊ฐ€ ๋ถ€์กฑํ•ฉ๋‹ˆ๋‹ค. (์ œ๊ณต๋œ ์†Œ์Šค๋Š” React์˜ ์ „๋ฐ˜์ ์ธ ์ƒํƒœ ๊ด€๋ฆฌ ์ƒํƒœ๊ณ„๋ณด๋‹ค๋Š” TypeScript๋ฅผ ํ™œ์šฉํ•œ ์ƒํƒœ ๋ณดํ˜ธ ๋ฐ ํƒ€์ž… ํŒจํ„ด์— ๋‚ด์šฉ์ด ์ง‘์ค‘๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ™•์ธ ๊ฐ€๋Šฅํ•œ ํ•ต์‹ฌ ์ •๋ณด๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.) - **์ƒํƒœ ๊ด€๋ฆฌ์˜ ์ค‘์š”์„ฑ๊ณผ ์œ„ํ—˜์„ฑ**: ์ƒํƒœ(State)๋Š” ์—ฌ๋Ÿฌ ์œ„์น˜์—์„œ ๋ช…ํ™•ํ•œ ํŒจํ„ด ์—†์ด ์ˆ˜์ •๋  ๊ฒฝ์šฐ ๋™์ž‘ ์˜ˆ์ธก์ด ๋ถˆ๊ฐ€๋Šฅํ•ด์ง€๊ณ  ๋””๋ฒ„๊น…์ด ๋งค์šฐ ์–ด๋ ค์›Œ์ง‘๋‹ˆ๋‹ค [5]. ๋˜ํ•œ, ๋ถˆํ•„์š”ํ•œ ๋ฆฌ๋ Œ๋”๋ง์ด๋‚˜ ๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜์™€ ๊ฐ™์€ ์‹ฌ๊ฐํ•œ ์„ฑ๋Šฅ ๋ฌธ์ œ๋ฅผ ์œ ๋ฐœํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ฒ ์ €ํ•œ ๊ด€๋ฆฌ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค [5]. - **๊ตฌ๋ถ„๋œ ์œ ๋‹ˆ์–ธ(Discriminated Unions)์˜ ํ™œ์šฉ**: React ์ƒํƒœ ๊ด€๋ฆฌ ๋ฐฉ์‹์„ ํ˜์‹ ์ ์œผ๋กœ ๋ฐ”๊พธ๋Š” ๊ฐ•๋ ฅํ•œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํŒจํ„ด์€ ๋ฐ”๋กœ '๊ตฌ๋ถ„๋œ ์œ ๋‹ˆ์–ธ'์ž…๋‹ˆ๋‹ค [2]. ์ด ํŒจํ„ด์€ ํ˜ธํ™˜๋˜์ง€ ์•Š๋Š” ์ž˜๋ชป๋œ ์ƒํƒœ(Invalid states)๊ฐ€ ์กฐํ•ฉ๋˜๋Š” ๊ฒƒ์„ ์•„์˜ˆ ๋ถˆ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค [3]. ํŠนํžˆ, Redux ์Šคํƒ€์ผ์˜ ๋ฆฌ๋“€์„œ(Reducer) ๋กœ์ง, ๋ผ์šฐํ„ฐ(Router) ์ƒํƒœ ๊ด€๋ฆฌ, ๊ทธ๋ฆฌ๊ณ  ๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ ํŒจ์นญ(๋กœ๋”ฉ, ์„ฑ๊ณต, ์‹คํŒจ ๋“ฑ)์˜ ์ƒํƒœ ๋จธ์‹ (State Machine)์„ ๋ชจ๋ธ๋งํ•  ๋•Œ ๋งค์šฐ ํšจ๊ณผ์ ์ž…๋‹ˆ๋‹ค [6, 7]. - **๋ถˆ๋ณ€์„ฑ(Immutability)์˜ ๊ฐ•์ œ**: ์•ˆ์ „ํ•œ ์ƒํƒœ ๊ด€๋ฆฌ ๋ฐ ๋ฆฌ๋“€์„œ ๊ตฌํ˜„์„ ์œ„ํ•ด ๊ฐ์ฒด์˜ ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ(Mutation)์„ ๋ฐฉ์ง€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค [8]. ์ด๋ฅผ ์œ„ํ•ด `readonly` ์ˆ˜์‹์–ด๋‚˜ `Readonly`, `DeepReadonly` ์œ ํ‹ธ๋ฆฌํ‹ฐ ํƒ€์ž…์„ ์ ์šฉํ•˜์—ฌ ์ƒํƒœ ๋ฐ์ดํ„ฐ๊ฐ€ ์ดˆ๊ธฐํ™”๋œ ํ›„ ์˜๋„์น˜ ์•Š๊ฒŒ ์กฐ์ž‘๋˜๋Š” ๊ฒƒ์„ ์ปดํŒŒ์ผ ํƒ€์ž„์— ์›์ฒœ ์ฐจ๋‹จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [4, 8, 9]. - **์ฃผ์š” ์—ฐ๊ด€ ํŒจํ„ด**: `useState` ๋ฐ `useEffect`๋ฅผ ํ™œ์šฉํ•œ ๊ธฐ๋ณธ์ ์ธ ๋ฐ์ดํ„ฐ ํŒจ์นญ ํ”„๋กœ์„ธ์Šค, ๋‚™๊ด€์  ์—…๋ฐ์ดํŠธ(Optimistic Updates) ์ฒ˜๋ฆฌ, ๊ทธ๋ฆฌ๊ณ  Context API๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ์˜ ์—„๊ฒฉํ•œ ํƒ€์ž… ์ง€์ •(Context ๋ฐ Selector ํƒ€์ดํ•‘) ๋“ฑ์ด React ์ƒํƒœ ๊ด€๋ฆฌ์˜ ์ฃผ์š” ๊ตฌ์„ฑ ์š”์†Œ๋กœ ํ™œ์šฉ๋ฉ๋‹ˆ๋‹ค [10, 11]. ## โš ๏ธ ๋ชจ์ˆœ ๋ฐ ์—…๋ฐ์ดํŠธ (Contradictions & RL Update) - **๊ณผ๊ฑฐ ๋ฐ์ดํ„ฐ์™€์˜ ์ถฉ๋Œ:** ์ž๋™ํ™” ์—”์ง„์— ์˜ํ•ด ๋งคํ•‘๋œ ์ง€์‹์œผ๋กœ, ์ถ”ํ›„ ์ •๋ฐ€ ๊ฒ€์ฆ ํ•„์š”. - **์ •์ฑ… ๋ณ€ํ™”:** Design & Experience ๋ถ„์•ผ์˜ ์ž๋™ ์ž์‚ฐํ™” ์ˆ˜ํ–‰. ## ๐Ÿ”— ์ง€์‹ ์—ฐ๊ฒฐ (Graph) - **Related Topics:** [[Discriminated Unions|Discriminated Unions]], [[แ„‡แ…ฎแ†ฏแ„‡แ…งแ†ซแ„‰แ…ฅแ†ผ (Immutability)|Immutability]], State Machine Pattern - **Projects/Contexts:** Redux-style Reducers, [[Context API|Context API]] - **Contradictions/Notes:** ์†Œ์Šค ๋ฌธ์„œ๋Š” React ํ”„๋ ˆ์ž„์›Œํฌ ์ž์ฒด์˜ ์ƒํƒœ ๊ด€๋ฆฌ ๋™์ž‘ ์›๋ฆฌ(์˜ˆ: Virtual DOM๊ณผ์˜ ๊ด€๊ณ„, ํ›…์˜ ๋‚ด๋ถ€ ์›๋ฆฌ ๋“ฑ)๋ฅผ ๊นŠ์ด ์žˆ๊ฒŒ ๋‹ค๋ฃจ๊ธฐ๋ณด๋‹ค๋Š”, TypeScript์˜ ํƒ€์ž… ์‹œ์Šคํ…œ(๊ตฌ๋ถ„๋œ ์œ ๋‹ˆ์–ธ, ๋ถˆ๋ณ€์„ฑ ๋“ฑ)์„ React ์ƒํƒœ ๊ด€๋ฆฌ์— ์–ด๋–ป๊ฒŒ ์ ‘๋ชฉํ•˜์—ฌ ์•ˆ์ •์„ฑ์„ ๋†’์ด๋Š”์ง€์— ์ดˆ์ ์ด ๋งž์ถ”์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. --- *Last updated: 2026-04-18* - Raw Source: 00_Raw/2026-04-20/React ์ƒํƒœ ๊ด€๋ฆฌ (React State Management).md ---