[Zustand] 미들웨어 (persist)

미들웨어(persist)

상태를 새로 고침하거나 앱을 닫았다가 다시 열어도 상태를 유지할 수 있게 해주는 기능

부분 저장

persist 미들웨어 옵션으로 partialize 속성을 전달

const usePositionStore = create<PositionState>()(
   persist(
      …,
      {
          name: ‘position-storage’,
          partialize: (state) => ({ context: { position: state.context.position } }),
       }
   )
)

예) context 내부에 위치 정보 이외에도 유저 정보나 설정 값 등이 들어가 있을 수 있는데, 이때 position만 저장 가능

수동 Hydration

Hydration: 저장된 상태를 불러와서 앱에 다시 주입해주는 과정
예) 로컬 스토리지에 저장된 값을 앱이 시작할 때 다시 불러옴
서버사이드렌더링(SSR) 환경이나 특정 시점에 복원하고 싶은 경우, 자동 복원 기능을 끄고 필요할 때 직접 복원 가능

⚠️ 참고: Next.js(SSR 프레임워크)에서는 브라우저에서만 로컬스토리지에 접근 가능하기 때문에 클라이언트로 전환하여 앱이 브라우저에서 동작하기 시작한 후에 복원 가능

skipHydration과 rehydrate 조합으로 원하는 시점에 복원할 수 있음

const positionStore = create<PositionStore>() (
   persist(
      …,
      {
          name: ‘position-storage’,
          skipHydration: true, // 자동 복원 기능 해제 
       }
   ),
)
setTimeout(() => {
   positionStore.persist.rehydrate() // 원하는 타이밍에 수동 복원
}, 2000)

Persist의 기능

기본 저장, 일부 저장(partialize), 커스텀 스토리지, 수동 복원(skipHydration)