Zustand를 통한 상태 관리

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

먼저 zustand를 설치해줍니다.

bash

1npm i zustand

store를 생성합니다.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import { 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를 관리할 수 있습니다.

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13import { useCountStore } from "./store/countStore";

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

export default App;

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

Zustand를 통한 상태 관리

기술 정리의 다른 글