문제 정의

프로젝트에서 Zustand를 상태 관리 라이브러리로 채택하였는데 불변성 관리와 상태의 일시적 저장이 필요했습니다.

해결 과정

해당 상황에 맞는 유용한 라이브러리를 찾아보니, Zustand 도 Immer와 함께 사용하여 불변성을 유지한다는 것을 알게 되었고, zustand-persist 를 통해 상태를 로컬스토리지에 저장할 수 있다는 것을 알게 되었습니다.

결과

아래와 같이 사용할 수 있었습니다.

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', // 로컬 스토리지 키 이름
  }
));

배운 점 (인사이트)

• Immer를 통한 불변성 유지의 장점: Immer를 사용함으로써 불변성을 유지하면서도 직관적인 방식으로 상태를 업데이트할 수 있다는 점을 배웠습니다. 이를 통해 코드의 가독성이 향상되고, 버그 발생 가능성이 줄어들었습니다.
• Persist 미들웨어로 인한 사용자 경험 개선: Persist 미들웨어를 도입하여 상태를 로컬 스토리지에 저장함으로써, 사용자 세션 간 상태를 유지할 수 있게 되었습니다. 이는 사용자 경험을 크게 향상시키는 요소로 작용했습니다.
• 문제 해결 능력 강화: Zustand, Immer, Persist를 함께 사용하면서 발생할 수 있는 잠재적인 문제들을 사전에 인지하고, 이를 효과적으로 해결하는 방법을 학습함으로써 문제 해결 능력을 강화할 수 있었습니다.