Framework/React

[React] Zustand๋ž€?

yuri lee 2023. 4. 14. 22:43
๋ฐ˜์‘ํ˜•

Intro

์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” React Zustand ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. 

 

Zustand

๋ฆฌ์•กํŠธ๋ฅผ ๊ณต๋ถ€ํ•˜์‹  ๋ถ„์ด๋ผ๋ฉด, ์ƒํƒœ (State)๋ผ๋Š” ๊ฐœ๋…์— ๋Œ€ํ•ด ๋“ค์–ด๋ณด์…จ์„ ๊ฒ๋‹ˆ๋‹ค. ๊ฐ„๋‹จํžˆ ๋งํ•˜์ž๋ฉด React Zustand๋Š” ๋ฆฌ์•กํŠธ์—์„œ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

๋ฆฌ์•กํŠธ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” Redux, MobX ๋“ฑ์ด ์กด์žฌํ•˜์ง€๋งŒ Zustand๋Š” ์œ„ ๋ผ์ด๋ธŒ๋Ÿฌ์— ๋น„ํ•ด ๋” ๊ฐ€๋ณ๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

 

Zustand Features

  • Zustand๋Š” State๋ฅผ ์ „์—ญ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋ฉฐ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์— ๊ณต์œ ๋˜๋Š” State Container๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด Container ๋Š” ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ง์ ‘ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ useStore()์„ ํ†ตํ•ด ์ƒํƒœ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  (get), ์—…๋ฐ์ดํŠธ (set) ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • Zustand ๋Š” ๋น„๋™๊ธฐ ์ƒํƒœ ์—…๋ฐ์ดํŠธ, ๋ฏธ๋“ค์›จ์–ด ๊ธฐ๋Šฅ, ์บ์‹ฑ ๋“ฑ์˜  ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธฐ๋Šฅ๋“ค์„ ํ†ตํ•ด ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ๋”์šฑ ํšจ์œจ์ ์œผ๋กœ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

 

 


https://github.com/pmndrs/zustand

๋ฐ˜์‘ํ˜•