[React] 상태 관리 라이브러리 Zustand

📚 Zustand ( 독일어로 State )❓❓

• 간소화된 Flux 원칙 사용하는 작고 빠르고 확장 가능한 barebone 상태 관리 솔루션
• Jotai 및 React 스프링 개발자가 구축한 빠르고 확장 가능한 상태 관리 솔루션

---

🎈특징

⭐리덕스 이후에 나온거라 "리덕스보다 간단하다"가 가장 특징

1️⃣ 상용구 코드 감소⬇

• 불필요한 코드 작성 줄어들어 개발 간단해짐👩‍💻

2️⃣ 효율적인 렌더링💻

• 상태가 변경될 때만 관련된 컴포넌트가 렌더링
• 상태 변경을 처리하면서 불필요한 컴포넌트 렌더링 피할 수 있음😮

3️⃣ 간단한 상태 관리✨

• 중앙 집중식으로 상태를 관리하며 단순한 작업 정의로 상태를 업데이트🆙
• 리덕스처럼 reducer, action, dispatch 작성❌

4️⃣ Hooks 기반 접근🎣

• 리액트의 hooks 사용해 상태를 관리하고 접근 가능⭕

5️⃣ Context 불필요🙅‍♀️

• Context API 사용하지 않아 코드 간결하고 가독성👍

---

👩‍💻얼마나 간단한지 Zustand 사용해보자❗
👉 간단한 카운트 앱 만들기

📁바탕화면에 zustand-app 폴더 생성하기

📥리액트 설치하기 : npx create-react-app ./

📥Zustand 설치하기 : npm install zustand

App.js 에서 필요없는 코드 지우고 npm run start로 실행하기

⬇

src 안에 components 폴더 만들고 Counter.js 파일 만들어주기

▫ src>components>Counter.js

rafce 해주고 함수형 컴포넌트 자동 생성하기

App.js 안에서 Counter 컴포넌트 넣어주기
import Counter from './components/Counter.js';

⬇

state 이용해서 간단하게 만들 수 있지만
지금은 Zustand 사용해야하므로 src 폴더 안에 store.js 파일 만들기

▫ src>store.js

🤓Recoil 할 땐 atom & selector를 이용했었음

Zustand 에선 create 이용할거임🔥

set 하고 이 안에다 여러가지의 기본 state를 담을거임
count 라는 state의 값은 1로 지정( 첨에 1부터 시작할 것 ),
애를 업데이트 해주는 함수 이름은 inc로 해주고
이 함수는 set 하고 원래 있던 state 가져온 담에
여기 있는 count는 원래 있던 state에 count + 1 해주면 됨

...🥴...

useCounterStore 다른 곳에서 사용할거니까 export로 내보내기🥏

Counter.js 에 있는 기본 값 1을 store.js 에 있는 count: 1로 바꾸길 원하고,
button 클릭했을 때 inc 함수를 호출하길 원하는 상황🙏

useCounterStore를 호출하면 count랑 inc가 다 호출되는 것📢

const { count, inc } = useCounterStore( );

잘 작동되는 걸 확인할 수 있음( one up 버튼 누를 때마다 1씩 잘 올라감 )👀

😎context, redux, recoil, zustand 중 사람들이 대부분 편해하는 건 zustand
⚡주관적이기에 편할 걸로 사용하면 됨