Zustand 시작하기

오늘은 Zustand에 대해서 공부했다! Redux를 공부하고 온 나에게는 마치 하늘에서 떨어지는 단비와 같다…

Provider…dispatch…slice 안녕

설치하기

npm i zustand

yarn add zustand

파일 만들기

// store.js

import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  inc: () => set((state) => ({ count: state.count + 1 })),
}));

export default useStore;

끝.

??

실제로 Zustand에서 store를 만드는 코드가 이렇게 간단할 줄이야… 심지어 Provider로 감쌀 필요도 없다니.

Zustand에서는 state와 action을 한 객체 안에서 같이 보관하는 것 같다. 필요할 경우 함수나 state를 파일분리하거나 스토어를 분리해서 사용하면 앱의 규모에 맞게 확장이 용이하다고 한다.

State 사용하기

// App.jsx

  const { count, inc } = useStore();
  //         같은 코드 : const { count, inc } = useStore(state => state);
  //   리렌더링 성능 UP : const count = useStore(state => state.count);
  ...

끝… 이게 뭐지… 이렇게 간단하다니…

기존에 Redux에서는 state를 가져오기 위해서는 useSelector를 써야했고, 데이터를 변경하기 위해서는 action 함수와 useDispatch 훅으로 구분해서 사용해야 했는데 여기는 그런거 없다.

리렌더링 성능 UP을 보면, state를 구조분해하지 않고 count 속성에 접근하여 count만 단독으로 가져오고 있다. 이렇게되면 count라는 state만을 단독으로 구독하므로 불필요한 리렌더링을 줄일 수 있다고 한다.

어찌되었든 너무 간편해서 놀랄 정도… 사용법 끝.

immer, persist

import { create } from "zustand";
import { persist } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";

const useStore = create(
  persist(
    immer((set) => ({
      count: 0,
      inc: () => set((state) => ({ count: state.count + 1 })),
    })),
    { name: "count-store" }
  )
);

export default useStore;

immer는 불변성 관리를 위한 도구이고, persist는 새로고침 이후에도 로컬의 스토리지를 통해서 데이터를 유지시키도록 도와주는 기능이다. 두 기능 모두 create안에 들어가는 callback을 감싸주면 사용할 수 있다.

꿀팁 : zustand-snippet

zus...

이렇게 extension으로 zustand-snippet을 깔면 zus 까지만 입력해도 store의 틀을 만들어주는 스니펫이 나온다. 간단에 간단을 더한!