Zustand란 뭘까? 🐻

오늘은 제가 Context API글을 작성하면서 알게 된 Zustand라는 전역 상태관리 라이브러리에 대해서 설명해보겠습니다

❓❓❓띠옹

---

❓ Zustand란?

 Zustnad는 전역 상태 관리 라이브러리 중 하나입니다

 

작은 패키지 크기와 직관적인 사용법 덕분에 Redux와 Mobx와 더불어 많은 개발자들로 부터 사랑받고 있습니다

 

불필요한 리렌더링을 최소화하였고 학습곡선이 낮습니다

단방향으로 소통하는 React이기 때문에 component의 수가 많으면 복잡하게 props drilling 과정을 거치게 되는데 이렇게 되면 유지보수를 할 때에도 피곤하고 성능이 저하될 우려 또한 존재합니다

 

Props drilling이란?

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 중간에 있는 컴포넌트들이 해당 데이터를 직접 사용하지 않더라도 props를 통해 계속 전달해야 하는 상황을 말합니다

Zustand

 

---

🎯 사용하기 

1. 설치하기
2. 스토어 만들기
3. 스토어 사용하기

설치하기

npm install zustand # npm

yarn install zustand # yarn

우선 zustand 라이브러리를 설치해줍니다

스토어 만들기

// store.js
import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0, // 초기화
  increase: () => set((state) => ({ count: state.count + 1 })), // count ++
  decrease: () => set((state) => ({ count: state.count - 1 })), // count --
}));

export default useStore;

스토어 안에 count 값을 0으로 초기화 해주고 증가함수와 감소함수를 만들었습니다

스토어 사용하기

// App.js
import React from 'react';
import useStore from './store';

function App() {
  const { count, increase, decrease } = useStore(); // 상태와 함수를 가져옴

  return (
    <div>
      <h1>Count: {count}</h1> 
      <button onClick={increase}>+</button> 
      <button onClick={decrease}>-</button> 
    </div>
  );
}

export default App;

이렇게 App.js에서 상태와 함수를 가져와서 사용을 해주었습니다

---

마무리 

이렇게 zustand에 대해서 알아보고 사용해보았는데요

 

zustand는 다른 전역 상태관리 라이브러리보다 훨씬 더 배우기 쉽고 가벼운 라이브러리였습니다 

 

요즘 유행하는 전역 상태관리 라이브러리이니 여러분들도 꼭 사용해보셨으면 좋겠습니다