Zustand를 통한 상태 관리

현재까지 사용한 상태관리는 Redux-Toolkit이 전부였는데 실무에서 선임 분이 해당 프로젝트에서는 전역 상태 관리를 Zustand를 사용하셨다고 말씀하셔서 Zustand를 접하게 되었는데 무지 간편해서 사용 법을 정리해보려고 한다.

 

 

먼저 zustand를 설치해줍니다.

npm i zustand

 

store를 생성합니다. 

store 생성도 기존에 Redux-Toolkit보다 훨씬 간결한 것 같습니다.

countStore.ts

import { create } from "zustand"; // {create}로 해야됨 create로 쓸 시 오류 남

type countStoreType = {
  // TS를 이용하신 다면 useCountStore의 type을 지정 해야 합니다.
  count: number;
  countUp: () => void;
};

export const useCountStore = create<countStoreType>((set) => ({
  count: 0, // 초기값
  countUp: () => {
    // countUp 함수
    set((state) => ({ ...state, count: state.count + 1 }));
  },
}));

 

이제 어느 컴포넌트에서나 count의 값과 contUp함수를 이용해서 state를 관리할 수 있습니다.

import { useCountStore } from "./store/countStore";

function App() {
  const { count, countUp } = useCountStore(); // 선언한 useCountStore를 불러와야 함
  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => countUp()}>+</button>
    </>
  );
}

export default App;

 

사용해 본 결과 정말 간결해서 예제만 보고 쉽게 이용할 수 있었습니다.