[Zustand] 사용방법

1. 설치하기

npm i zustand
yarn add zustand

2. store 만들기

import create from 'zustand';
import { TUser } from '../../types/auth';

interface UserState {
  user: TUser | null;
  setUser: (user: TUser | null) => void;
}

const useUserStore = create<UserState>((set) => ({
  user: null,
  setUser: (user) => set({ user })
}));

export default useUserStore;

위와같이 Zustand의 store를 만드는 코드는 간단하다

Provider로 감쌀필요도 없이 state 와 action을 한 객체 안에서 같이 보관하는것 같다

3. State 사용하기

 import useUserStore from '../../store/useUserStore';
 
 const { user, setUser } = useUserStore();

Redux에서는 state를 가져오기 위해 useSelector를 쓰고, 데이터 변경을 위해 action함수와 useDispatch훅으로 구분해서 사용했어야했는데, Zustand는 user로 state를 가져오고, set함수로 변경한다.

4, 추가 미들웨어 사용하기

- immer : 불변성관리를 위한 도구
- persist : 새로고침 이후에도 로컬스토리지를 통해서 데이터를 유지시키도록 도와주는 기능

두 기능 모두 create안에 들어가는 callback을 감싸주면 사용할 수 있다

import create from 'zustand';
import { persist } from 'zustand/middleware';
import { TUser } from '../types/auth';

interface UserState {
  user: TUser | null;
  setUser: (user: TUser | null) => void;
}

const useUserStore = create(
  persist<UserState>(
    (set) => ({
      user: null,
      setUser: (user) => set({ user })
    }),
    {
      name: 'userInfo'
    }
  )
);

export default useUserStore;