[Zustand] Zustand typecript로 사용해보기

사용이유

Zustand는 Redux와 같은 전통적인 상태 관리 라이브러리보다 더 간단하게 상태를 관리할 수 있습니다. 상태 및 액션을 정의하기 위한 코드 양이 줄어듭니다.

 

store생성

-라이브러리 설치

npm install zustand
// or
yarn add zustand

 

 

-store 생성, 안에서 store 내부에서 미리 사용할 함수를 선언해줍니다.

// store.ts

import { create } from "zustand";

type CounterStore = {
  count: number;
  increment: () => void;
  decrement: () => void;
};

const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useCounterStore;

 

사용

  const { count, increment, decrement } = useCounterStore();

  return (
    <>
      <div>{count}</div>
      <button onClick={increment}>증가</button>
      <button onClick={decrement}>감소</button>
    </>
  );

- jotai , zustand 둘 다 사용해봤는데 jotai는 편리하긴한데 store도 없어서,

완전히 redux와 다른 개념인 느낌이었다.

-zustand는 redux의 개념을 잃어버리지 않게 하는듯하다.