[React] Zustand에 대해 알아보자 3편 - React 상태 관리 라이브러리

---

■ subscribe

■ destory

■ persist

■ combine

---

 

안녕하세요. 이번 포스팅에선 zustand를 사용할 때,

create / set / get 외에 알아두면 좋은 함수와 기능들을 정리해보려고 합니다.

 

지난 포스팅에선 create, set, get을 다뤘습니다!

 

https://leebaek.tistory.com/157

[React] Zustand에 대해 알아보자 2편 - React 상태 관리 라이브러리

 

---

■ subsribe

: store(상태 저장소)의 상태가 바뀔 때마다 감지하는 함수

 

컴포넌트가 아니라, 직접 상태 변화를 감지해서 어떤 작업을 하고 싶을 때 사용합니다.

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
}));

const unsub = useStore.subscribe(
  (state) => state.count,
  (count) => {
    console.log('Count changed to:', count);
  }
);

// 나중에 필요 없으면
unsub();

 

- 첫번째 함수: 어떤 상태를 구독할지

- 두번째 함수: 상태가 변경되었을 때 실행할 로직

 

주로 외부 라이브러리랑 연동하거나, 별도로 동작을 트리거할 때 사용합니다.

---

■ destroy

: store(상태 저장소)를 초기화하는 함수

 

만든 store를 완전히 해제하거나 초기화할 때 사용하는 함수입니다.

useStore.destroy();

 

예를 들어,

- 페이지 이동할 때 store 메모리를 깨끗하게 비우고 싶거나

- 로그아웃할 때 모든 상태를 리셋하고 싶을 때

사용합니다.

 

메모리 누수 방지나 상태 초기화에 유용합니다.

---

■ persist

: 상태를 localStorage나 sessionStorage에 저장하는 기능 ( middleware )

 

새로고침해도 상태를 유지하고 싶을 때 사용하는 미들웨어입니다.

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

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
    }),
    {
      name: 'counter-storage', // localStorage key
    }
  )
);

 

persist로 감싸주면,

상태가 자동으로 localStorage에 저장됩니다.

 

페이지를 새로고침해도 저장된 상태를 복구할 수 있습니다.

---

■ combine

: 여러 상태 조각을 하나로 묶는 함수

 

여러가지 초기 상태를 하나로 합쳐서 store를 만들고 싶을 때 사용합니다.

import { create } from 'zustand';
import { combine } from 'zustand/middleware';

const useStore = create(
  combine(
    { count: 0, text: '' },
    (set) => ({
      increase: () => set((state) => ({ count: state.count + 1 })),
      setText: (text) => set(() => ({ text })),
    })
  )
);

 

- 첫번째 인자: 초기 상태 객체

- 두번째 인자: 업데이트 함수

 

상태와 매소드를 깔끔하게 분리해서 관리할 수 있습니다.

---

 

 

오늘의 포스팅은 여기서 끝입니다!

 

---