[TIL] Zustand 기능

기본사용

• 사용자 정보를 전역에 저장하기로 했다.

// hooks 파일에 zustand 기본 선언

// type 선언
interface UserState {
  user: User | null;
  setUser: (user: User) => void;
}

// 초기값 선언
const initialUser: User | null = null;

export const useUser = create<UserState>((set) => ({
  user: initialUser, // 초기값
  setUser: (user: User) => set(() => ({ user })), // set함수 선언
}));

• 실제 클라이언트에서 사용할 때

const user = useUser(state => state.user); // 값을 가져올 때
const setUser = useUser(state => state.setUser); // set함수를 사용하고 싶을 때

• 구조분해로 뽑아서 사용할 경우

const { user, setUser } = useUser(state => ({
  user: state.user,
  setUser: state.setUser,
}));

persist

• 스토어 상태를 브라우저의 localStorage에 자동으로 저장하고 복원

// persist 없이 (일반적인 zustand)
const useStore = create(() => ({ count: 0 }))
// → 새로고침하면 count가 0으로 초기화됨

// persist와 함께
const useStore = create(
  persist(
    () => ({ count: 0 }),
    { name: 'my-store' }
  )
)
// → 새로고침해도 count 값이 유지됨

localStorage에서 확인 가능

partialize

• 전체 상태 중에서 어떤 부분만 localStorage에 저장할지 선택하는 옵션

export const useNav = create<NavState & NavActions>()(
  persist(
    (set, get) => ({

    }),
    {
      name: "nav-storage", // localStorage 키 이름
      partialize: (state) => ({
        activeMenu: state.activeMenu, // activeMenu만 localStorage에 저장
      }),
    },
  ),
);