[TIL #39] zustand - persist, immer

리팩토링을 하면서 zustand 라이브러리에서 사용하는 두 가지 미들웨어 persist와 immer에 설명하고자 한다.

---

persist

zustand 상태를 로컬 스토리지랑 세션스토리지에 저장하여 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열어도 상태가 유지되도록 하는 기능을 제공한다

persist를 통해 사용자가 웹사이트를 다시 방문했을 때 상태가 변동이 없다.

immer

불변 상태 관리를 더 쉽게 할 수 있도록 도와주는 라이브러리

상태가 불변성하게 유지하면서 간단하게 업데이트가 가능하다.
즉, 상태를 직접 변경하는 대신, immer가 제공하는 produce 함수를 사용하여 불변성을 자동으로 처리한다.

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

// 상태 관리 스토어 생성
const useStore = create(
  // 상태를 로컬 스토리지에 저장
  persist(
    // immer를 사용하여 상태 업데이트
    immer((set) => ({
      user: {},

      // 상태를 업데이트하는 함수
      setUser: (userInfo) => {
        set((state) => {
          state.user = userInfo;
        });
      },

      // 상태를 초기화하는 함수
      clearUser: () => {
        set((state) => {
          state.user = {};
        });
      }
    })),
    {
      name: 'user-store', // 로컬 스토리지에 저장될 키
    }
  )
);

export default useStore;

코드 설명

name: 'user-store'는 상태가 로컬 스토리지에 저장될 때 사용할 키이다.

set 함수 내에서 state.user = userInfo와 같이 상태를 업데이트하는 부분에서 immer가 자동으로 불변성을 유지해준다.

결론

사용자 인증 정보 (로그인, 회원가입) 할때 유용할 것 같다.