[리액트] Zustand 사용법

 

기존의 상태관리 라이브러리인 Redux는 제공하는 기능과 연계된 미들웨어 등 매우 강력한 퍼포먼스를 자랑하지만, 설정과 사용법이 복잡했다.  Zustand는 상태관리 본연의 기능에 집중하여 위와 같은 복잡성을 줄이고, 보다 간단하고 직관적인 상태관리 기능을 제공한다는 장점이 있다. 

📌 공식문서
단순화된 Flux 패턴을 사용하는 작고(small) 빠르고(fast) 확장가능한(scalable) 상태관리 솔루션이며, 
Hooks에 기반으로하는 간편한 API가 존재

 

 

 

 

설치

yarn add zustand

 

해당 경로로 파일 생성 후 세팅 초기값을 설정하고, 1씩 증가하는 로직과 초기화하는 로직을 만들었다.

// src > zustand > bearsStore.js
import { create } from "zustand";

const useBearsStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

export default useBearsStore;

 

 

 

사용

다른 컴포넌트에서 사용하는 방법은 useState, useEffect와 같은 기본 훅을 사용하는 것처럼 간편하게 사용할 수 있다.

// src > App.jsx
import "./App.css";
import useBearsStore from "./zustand/bearsStore";

function App() {
  const bears = useBearsStore((state) => state.bears);
  const increasePopulation = useBearsStore((state) => state.increasePopulation);
  return (
    <div>
      <h1>{bears} around here ...</h1>
      <button onClick={increasePopulation}>one up</button>
    </div>
  );
}
export default App;