Zustand 시작하기

zutand 는 react 상태 관리 라이브러리(중앙 집중형 스토어) 중 하나로, 최근 들어 redux 보다 편하고 가볍기 때문에 많이 사용하고 있는 추세입니다.

우선 상태관리 라이브러리는 왜 쓰는지 알꺼기 때문에 디테일한 설명을 들어가지 않습니다~~.

zutand github

실제로 github stars 를 보면, 많은 사용자가 쓰고 있고 라이센스도 MIT 를 사용하고 있습니다.

 

설치

yarn add zustand

예제

import { create } from "zustand";

const counterStore = (set) => ({
  count: 0,
  increment: (val) => set((state) => ({ count: state.count + (val ?? 1) })),
  decrement: (val) => set((state) => ({ count: state.count - (val ?? 1) })),
  reset: () => set(() => ({ count: 0 })),
});

const useCounterStore = create(counterStore);

export { useCounterStore };

 

이런 식으로 사용할 수 있고 만약에 devtools 기능을 쓰고 싶으면, zustand/middleware 를 사용하면 됩니다.

import { create } from "zustand";
import { devtools } from "zustand/middleware"

const counterStore = (set) => ({
  count: 0,
  increment: (val) => set((state) => ({ count: state.count + (val ?? 1) })),
  decrement: (val) => set((state) => ({ count: state.count - (val ?? 1) })),
  reset: () => set(() => ({ count: 0 })),
});

const useCounterStore = create(devtools(counterStore));

export { useCounterStore };

 

센스 있으신 분들은 이제 devtools 가 상용버전에서는 사용이 되지 않도록 처리하면 되겠죠?!?

 

자 이제 위에처럼 했으면 셋팅은 완료되었습니다. 이제 단순히 사용하면 끝입니다!

아래에서 이제 zustand 에 선언한 store 를 가져와서 count, increment, decrement 를 가져와 줍니다.

그래서 각 mode 에 따라 count 를 하나씩 증가시켜봅시다!!! redux 개발자도구도 가서 state 가 최신화 되는지도 같이 확인해봅시다!

import { startTransition } from "react";
import { useCounterStore } from "@zustand/counter";
import { Button } from "antd";

function CounterBtn() {
  const { count, increment, decrement } = useCounterStore();
  const degree = 1;

  const counterBtnHanlder = (mode, e) => {
    e.stopPropagation();

    if (mode === "increment") {
      startTransition(() => {
        increment(degree);
      });
    } else {
      startTransition(() => {
        decrement(degree);
      });
    }
  };

  return (
    <div>
      <Button type="primary" onClick={(e) => counterBtnHanlder("increment", e)}>
        증가!!
      </Button>
      <Button type="dashed" onClick={(e) => counterBtnHanlder("decrement", e)}>
        감소!!
      </Button>
      <span style={{ color: "#fff" }}>{count}</span>
    </div>
  );
}

export default CounterBtn;

 

참고

devtools 의 기능의 경우, 개발 환경을 구분지어주는게 좋기 때문에 아래와 같이 모듈형태로 셋팅했다.

import { devtools } from "zustand/middleware";

const zsEnvDevtools = (store) => {
  const prod = import.meta.env.PROD;
  const useStore = prod ? store : devtools(store);

  return useStore;
};

export default zsEnvDevtools;