# [[Zustand]] ## ๐Ÿ“Œ Brief Summary Zustand๋Š” Jotai์™€ React Spring์„ ๋งŒ๋“  ํŒ€์—์„œ ๊ฐœ๋ฐœํ•œ ๊ฐ€๋ณ๊ณ  ๋น ๋ฅด๋ฉฐ ์œ ์—ฐํ•œ React ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค [1, 2]. Context API๊ฐ€ ๊ฐ€์ง„ ๋ถˆํ•„์š”ํ•œ ๋ฆฌ๋ Œ๋”๋ง ๋ฌธ์ œ์™€ Redux์˜ ๊ณผ๋„ํ•œ ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๊ณ ์•ˆ๋˜์—ˆ์Šต๋‹ˆ๋‹ค [2-4]. Zustand์˜ ์Šคํ† ์–ด๋Š” React ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ ์™ธ๋ถ€์— ์กด์žฌํ•˜๋Š” ๋…๋ฆฝ์ ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋กœ ์ž‘๋™ํ•˜๋ฉฐ, Provider ๋ž˜ํผ(wrapper) ์—†์ด๋„ ์ „์—ญ ์ƒํƒœ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค [5, 6]. ## ๐Ÿ“– Core Content * **๊ฒฝ๋Ÿ‰์„ฑ๊ณผ ๋‹จ์ˆœ์„ฑ:** Zustand๋Š” ํŒจํ‚ค์ง€ ํฌ๊ธฐ๊ฐ€ ์•ฝ 2.2KB(์••์ถ• ๊ธฐ์ค€ ์•ฝ 1KB)๋กœ ๋งค์šฐ ๊ฐ€๋ฒผ์šฐ๋ฉฐ, `create()` ํ•จ์ˆ˜ ํ•˜๋‚˜๋งŒ์œผ๋กœ ์Šคํ† ์–ด๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์–ด ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ๊ฐ€ ๊ฑฐ์˜ ์—†์Šต๋‹ˆ๋‹ค [1, 5, 7, 8]. Redux์™€ ๋‹ฌ๋ฆฌ ์•ก์…˜ ํƒ€์ž…, ๋ฆฌ๋“€์„œ ๊ตฌ์„ฑ์„ ํ•„์š”๋กœ ํ•˜์ง€ ์•Š์œผ๋ฉฐ ์ƒํƒœ์™€ ์—…๋ฐ์ดํŠธ ํ•จ์ˆ˜๋ฅผ ํ•œ ๊ณณ์—์„œ ์ง๊ด€์ ์œผ๋กœ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค [4-6]. * **๋ฆฌ๋ Œ๋”๋ง ์ตœ์ ํ™” (Selector ํŒจํ„ด):** Context API๋Š” ์ƒํƒœ์˜ ์ผ๋ถ€๋งŒ ๋ณ€๊ฒฝ๋˜์–ด๋„ ํ•ด๋‹น ์ปจํ…์ŠคํŠธ๋ฅผ ๊ตฌ๋…ํ•˜๋Š” ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋˜๋Š” ์„ฑ๋Šฅ์  ํ•œ๊ณ„๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค [3, 9, 10]. ๋ฐ˜๋ฉด Zustand๋Š” ์„ ํƒ์ž(Selector) ํŒจํ„ด์„ ์‚ฌ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ž์‹ ์ด ํ•„์š”๋กœ ํ•˜๋Š” ํŠน์ • ์ƒํƒœ ์Šฌ๋ผ์ด์Šค(slice)์—๋งŒ ๊ตฌ๋…ํ•˜๋„๋ก ๋งŒ๋“ญ๋‹ˆ๋‹ค [9, 11]. ์„ ํƒ๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋งŒ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋˜๋ฏ€๋กœ, ์žฅ๋ฐ”๊ตฌ๋‹ˆ๋‚˜ ์‹ค์‹œ๊ฐ„ ์•Œ๋ฆผ์ฒ˜๋Ÿผ ์ž์ฃผ ์—…๋ฐ์ดํŠธ๋˜๋Š” ์ƒํƒœ ๊ด€๋ฆฌ์— ํƒ์›”ํ•œ ์„ฑ๋Šฅ์„ ๋ฐœํœ˜ํ•ฉ๋‹ˆ๋‹ค [11, 12]. * **React ์ƒ๋ช…์ฃผ๊ธฐ ์™ธ๋ถ€์—์„œ์˜ ์ž‘๋™:** Zustand์˜ ์Šคํ† ์–ด๋Š” ๋‹จ์ˆœํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋กœ์„œ React์˜ ๋ Œ๋”๋ง ์ฃผ๊ธฐ ์™ธ๋ถ€์— ์™„์ „ํžˆ ๋…๋ฆฝ์ ์œผ๋กœ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค [5]. ์ด๋Ÿฌํ•œ ์•„ํ‚คํ…์ฒ˜ ๋•๋ถ„์— React ์ปดํฌ๋„ŒํŠธ ์™ธ๋ถ€์˜ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜๋‚˜ API ํ—ฌํผ ํŒŒ์ผ ๋“ฑ์—์„œ๋„ ์ง์ ‘ ์ƒํƒœ๋ฅผ ์ฝ๊ฑฐ๋‚˜ ์—…๋ฐ์ดํŠธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [8, 13]. * **ํ™•์žฅ์„ฑ ๋ฐ ํ”„๋กœ์ ํŠธ ์ ํ•ฉ์„ฑ:** ์•ฝ 50~500๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€์ง„ ์ค‘๊ฐ„ ๊ทœ๋ชจ์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด๋‚˜ 5~15๋ช… ๊ทœ๋ชจ์˜ ํŒ€, ๋น ๋ฅธ MVP ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์— ๊ฐ€์žฅ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค [14, 15]. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ(TypeScript) ์ง€์›์ด ๋›ฐ์–ด๋‚˜๋ฉฐ, ์ „์—ญ ์ƒํƒœ๊ฐ€ ๋งŽ์•„์ง€๋”๋ผ๋„ ์ค‘์ฒฉ๋œ Provider(Provider nesting)๋ฅผ ์ƒ์„ฑํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ๋ฅผ ๊น”๋”ํ•˜๊ฒŒ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [8, 13, 15]. * **๋„์ž… ์‹œ ์ฃผ์˜์  (์œ ์—ฐ์„ฑ์˜ ์–‘๋ฉด์„ฑ):** ์—„๊ฒฉํ•œ ํŒจํ„ด์„ ๊ฐ•์ œํ•˜๋Š” Redux์™€ ๋‹ฌ๋ฆฌ Zustand๋Š” ๋„ˆ๋ฌด ์œ ์—ฐํ•ด์„œ ๊ฐœ๋ฐœ์ž๋งˆ๋‹ค ๋น„๋™๊ธฐ ์ž‘์—… ํŒจํ„ด์„ ๋‹ค๋ฅด๊ฒŒ ์ž‘์„ฑํ•˜๋Š” ๋“ฑ 'Store Soup(์Šคํ† ์–ด ํ˜ผ๋ˆ)' ์ƒํƒœ๋ฅผ ์œ ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [4, 14, 16]. ๋”ฐ๋ผ์„œ ๋Œ€๊ทœ๋ชจ ์•ฑ์ด๊ฑฐ๋‚˜ ํŒ€ ๊ทœ๋ชจ๊ฐ€ ์ปค์งˆ ๊ฒฝ์šฐ ์„ ํƒ์ž ์‚ฌ์šฉ ๋ฐฉ์‹ ๋ฐ ๋ฏธ๋“ค์›จ์–ด ํŒจํ„ด์— ๋Œ€ํ•œ ๋ช…ํ™•ํ•œ ๊ทœ์น™ ์ˆ˜๋ฆฝ์ด ์š”๊ตฌ๋˜๋ฉฐ, ํ†ต์ œ๊ฐ€ ์–ด๋ ต๋‹ค๋ฉด Redux ๋„์ž…์ด ๋” ๋‚˜์€ ๋Œ€์•ˆ์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [15, 17-19]. ## ๐Ÿ”— Knowledge Connections - **Related Topics:** [[React Context API]], [[Redux]], [[State Management]], [[React Hooks]], [[Re-renders Optimization]], [[Clean Code Principles]] - **Projects/Contexts:** [[Scalable React Architecture]], [[Frontend Performance Optimization]], [[Refactoring Techniques]] - **Contradictions/Notes:** ์†Œ์Šค์— ๋”ฐ๋ฅด๋ฉด Context API๋Š” ์˜์กด์„ฑ์ด ์—†๊ณ  ์ •์ ์ธ ํ…Œ๋งˆ/์–ธ์–ด ๋ฐ์ดํ„ฐ ๋“ฑ์— ์ ํ•ฉํ•˜์ง€๋งŒ ์ž์ฃผ ๋ณ€๊ฒฝ๋˜๋Š” ์ƒํƒœ์—์„œ๋Š” "๋ฆฌ๋ Œ๋”๋ง ํญํ’"์„ ์ผ์œผํ‚ค๋Š” ๋ฐ˜๋ฉด, Zustand๋Š” Selector๋ฅผ ํ†ตํ•ด ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ฉ๋‹ˆ๋‹ค [10-12, 20]. ๊ทธ๋Ÿฌ๋‚˜ Zustand์˜ ๋†’์€ ์œ ์—ฐ์„ฑ์€ ์žฅ์ ์ธ ๋™์‹œ์— ๋‹จ์ ์œผ๋กœ ์ž‘์šฉํ•˜์—ฌ, ๋Œ€๊ทœ๋ชจ ํŒ€์ด๋‚˜ ๋น„๋™๊ธฐ ์ž‘์—…์ด ๋งค์šฐ ๋งŽ์€ ๋ณต์žกํ•œ ์•ฑ์—์„œ๋Š” ์ผ๊ด€๋œ ํŒจํ„ด์„ ๊ฐ•์ œํ•˜๋Š” Redux์— ๋น„ํ•ด ์œ ์ง€๋ณด์ˆ˜์— ํŒŒํŽธํ™”๋œ ํ˜ผ๋ž€์„ ์ดˆ๋ž˜ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ๊ฒฝ๊ณ ํ•ฉ๋‹ˆ๋‹ค [4, 14, 18, 21]. --- *Last updated: 2026-04-26*