[240421 TIL] Zustand 함수형업데이트, immer, persist

함수형 업데이트

Zustand의 set 함수에서 상태를 업데이트할 때, 두 가지 방식 모두 사용할 수 있습니다:

1. 단순한 상태 업데이트:이 방식은 상태를 직접적으로 업데이트합니다. set 함수에 객체를 전달하면 Zustand는 해당 객체를 기존 상태에 병합(merge)합니다.
2. setUser: (user) => set({ user }), setLoggedIn: (isLoggedIn) => set({ isLoggedIn }),
3. 함수형 상태 업데이트:이 방식은 함수형 업데이트를 사용하여 상태를 업데이트합니다. 이 패턴은 주로 이전 상태에 의존하는 상태 업데이트가 필요할 때 사용됩니다. 예를 들어, 상태의 특정 부분을 변경할 때 이전 상태를 참조해야 할 경우에 유용합니다.
4. setUser: (user) => set(() => ({ user })), setLoggedIn: (isLoggedIn) => set(() => ({ isLoggedIn }))

주어진 예제에서 상태를 업데이트할 때 이전 상태를 참조할 필요가 없기 때문에, 두 가지 방식 모두 유효합니다. 따라서 두 가지 방식 중 어느 것을 사용해도 문제가 없습니다. 주어진 경우에는 함수형 업데이트가 불필요하므로 단순한 상태 업데이트 방식을 사용해도 괜찮습니다.

그러나 함수형 업데이트를 사용하는 것이 더 익숙하거나, 일관성을 위해 항상 함수형 업데이트를 사용하는 것을 선호할 수도 있습니다. 이 경우 다음과 같이 사용할 수 있습니다:

export const useAuthStore = create<AuthState>((set) => ({
    user: null,
    isLoggedIn: false,
    setUser: (user) => set(() => ({ user })),
    setLoggedIn: (isLoggedIn) => set(() => ({ isLoggedIn })),
}));

이 두 가지 방식의 차이를 요약하면 다음과 같습니다:

• 단순한 상태 업데이트: 상태를 직접적으로 업데이트합니다. 이전 상태를 참조할 필요가 없을 때 간단하고 사용하기 쉽습니다.
• 함수형 상태 업데이트: 이전 상태를 참조하여 상태를 업데이트합니다. 이전 상태에 의존적인 업데이트가 필요할 때 사용합니다.

두 방식 모두 사용해도 되지만, 상황에 맞게 적절히 선택하는 것이 좋습니다. 이 경우, 상태를 단순히 설정하는 것이므로 더 간단한 첫 번째 방법을 사용해도 충분합니다.

immer && persist

immer와 zustand를 함께 사용하여 상태를 불변하게 관리하고, zustand-persist를 사용하여 상태를 로컬 스토리지에 저장할 수 있습니다. 아래는 immer와 zustand-persist를 함께 사용하는 예제입니다.

설치

먼저 필요한 패키지를 설치해야 합니다:

npm install zustand immer zustand-persist

설정 및 사용 예제

1. 스토어 설정

import create from 'zustand';
import { persist } from 'zustand/middleware';
import produce from 'immer';

// 스토어 생성
const useStore = create(persist(
  (set) => ({
    count: 0,
    increase: () => set((state) => produce(state, draft => { draft.count += 1; })),
    decrease: () => set((state) => produce(state, draft => { draft.count -= 1; }))
  }),
  {
    name: 'count-storage', // 로컬 스토리지 키 이름
  }
));

export default useStore;

2. 컴포넌트에서 사용

import React from 'react';
import useStore from './store'; // 스토어 불러오기

function Counter() {
  const { count, increase, decrease } = useStore();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}

export default Counter;

설명

• zustand와 zustand/middleware에서 persist를 가져와 스토어를 생성합니다. persist는 상태를 로컬 스토리지에 저장하는 기능을 제공합니다.
• immer의 produce 함수를 사용하여 상태 변경 시 불변성을 유지합니다.
• increase와 decrease 함수는 상태를 불변으로 관리하면서 값을 증가시키고 감소시킵니다.
• name 옵션을 통해 로컬 스토리지에 저장될 키 이름을 지정합니다.

이 예제를 통해 immer와 zustand를 함께 사용하여 상태를 불변하게 관리하고, zustand-persist를 사용하여 상태를 로컬 스토리지에 저장할 수 있습니다.