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); .. ์ด์ 1 ๋ค์