๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Zustand

(2)
React์˜ ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, Zustand์— ๋Œ€ํ•œ ๊ฐ„๋žต ์ •๋ฆฌ๊ธ€. ๋…์ผ์–ด๋กœ "์ƒํƒœ"๋ฅผ ์˜๋ฏธํ•˜๋Š” Zustand๋Š” React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋‹จ์ˆœํ™”๋œ Flux ํŒจํ„ด์„ ์‚ฌ์šฉํ•˜๋Š” ์ž‘๊ณ  ๋น ๋ฅธ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.hook์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ„ํŽธํ•œ API๋ฅผ ์ œ๊ณตํ•˜๋ฉฐ, ์ตœ์†Œํ•œ์˜ ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ ์ฝ”๋“œ๋กœ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋ฉฐ, ๊ฐœ๋ฐœ์ž๊ฐ€ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์ง๊ด€์ ์ด๊ณ  ์‰ฝ๊ฒŒ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค€๋‹ค.     ์ฃผ์š” ๊ธฐ๋Šฅ ๋ฐ ํŠน์ง• 1. ์‹ฌํ”Œํ•œ API:   Zustand์˜ API๋Š” ๋งค์šฐ ๊ฐ„๋‹จํ•˜๋‹ค. ๋ณดํ†ต 1~2๊ฐœ์˜ hook๋งŒ ์‚ฌ์šฉํ•˜์—ฌ ์ƒํƒœ๋ฅผ ์ •์˜ํ•˜๊ณ , ์ด๋ฅผ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฃผ๋กœ `create` ํ•จ์ˆ˜์™€ `useStore` ํ›…์„ ์‚ฌ์šฉํ•œ๋‹ค.2. ์ดˆ๊ฒฝ๋Ÿ‰:   Zustand๋Š” ๊ฒฝ๋Ÿ‰ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ, ํฌ๊ธฐ๊ฐ€ ์ž‘๊ณ  ๋น ๋ฅด๋‹ค. React Context API ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘๋™ํ•˜๋Š” ๋‹ค๋ฅธ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ๋น„..
[ React ] ์ƒํƒœ ๊ด€๋ฆฌ ํˆด ๋น„๊ต ๋ถ„์„ Recoil vs Zustand ํšŒ์‚ฌ์—์„œ ์ƒˆ๋กœ์šด React ํ”„๋กœ์ ํŠธ๋ฅผ ์„ธํŒ…์ค‘์ธ๋ฐ, ์ „์—ญ ์ƒํƒœ๊ด€๋ฆฌ ํˆด ์ค‘์—์„œ ํŒ€์›๋“ค์ด ๋น ๋ฅด๊ฒŒ ๋ฐฐ์šฐ๊ณ  ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์‰ฝ๊ฒŒ React ํ”„๋กœ์ ํŠธ์˜ ์ƒํƒœ ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•œ ํˆด 2๊ฐ€์ง€๋ฅผ ๋น„๊ตํ•ด ๋ณด๊ฒŒ ๋˜์—ˆ๋‹ค. Recoil (v0.7.7 ๊ธฐ์ค€) ์ „์ฒด ์นด์šดํ„ฐ ์ฝ”๋“œ counter sample code Recoil์€ ์•„๋ž˜์ฒ˜๋Ÿผ ์“ฐ์ธ๋‹ค. (ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ผ๋ถ€) import "./App.css"; import { countState } from "./state/countState"; import { useRecoilValue, useSetRecoilState, useResetRecoilState } from "recoil"; function App() { const count = useRecoilValue(countState); ..