공식 홈페이지

Zustand

zustand는 React의 전역 상태관리 라이브러리로 복잡한 Redux와 달리 가볍고 간단한 API를 제공하여 전역상태를 효율적으로 관리할 수 있다. 보통 많이 쓰는 Redux보다 간단한 초기 설정과 더 적은 코드로 상태 관리를 구현할 수 있어 사용하기에 편리하다.

또한 persist와 같은 미들웨어를 지원하여 따로 설치하지않아도 되서 간편하다!

주요 특징

간단한 API: 상태 정의와 사용이 직관적이며, 복잡한 설정이 필요 없음
가벼운 패키지: 라이브러리 크기가 작아 애플리케이션에 부담을 주지 않음
미들웨어 지원: persist와 같은 미들웨어를 통해 상태를 로컬 스토리지 등에 저장 가능

기본 사용법

npm install zustand

터미널에서 설치 가능하다

기본 세팅

import { create } from 'zustand';

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

최상위 루트에 store폴더 생성 후 store.ts 를 생성 후 기본적인 세팅을 해준다. 하나의 스토어에 여러개의 state와 함수를 담을 수 있다.

상태 사용

import useStore from './store/store';

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

  return (
    <div>
      <p>{count}</p>
      <button onClick={increase}>Increase</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default Counter;

컴포넌트에서 스토어를 불러와 상태와 함수 사용 가능

zustand로 캐시로 UI 경험 개선하기

export const useHolidayStore = create<calendarStoreType>((set, get) => ({
  holiday: undefined,
  isLoading: false,
  cache: {},
  fetchHoliday: async (year: number, month: number) => {
    const cacheKey = `${year}-${month}`;
    const cachedDate = get().cache[cacheKey];

    if (cachedDate) {
      set({ holiday: cachedDate });
      return;
    }

    set({ isLoading: true });

    try {
      const response = await fetch(`/api/holiday?year=${year}&month=${month}`);
      if (!response.ok) {
        throw new Error("Failed to fetch holidays");
      }
      const data = await response.json();
      const holidayItems = data.holiday;

      set((state) => ({
        holiday: holidayItems,
        cache: {
          ...state.cache,
          [cacheKey]: holidayItems,
        },
      }));
    } catch (err) {
      console.log(err);
      set({ holiday: undefined });
    } finally {
      set({ isLoading: false });
    }
  },
}));

Zustand를 사용하여 API 호출 결과를 캐싱함으로써 UI 성능 향상 가능
처음에 받아온 데이터를 변수 cache에 저장하고, 키값으로 내용을 비교하며 기존에 가져온 데이터가 있으면
새롭게 API 호출을 하지않고 cache에 저장된 데이터를 화면에 보여줌

persist로 로컬스토리지 접근하기

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


export const useCalendarUiStore = create<UiState>()(
  persist(
    (set) => ({
      isMonthView: true,
      setIsMonthView: (isMonth) => set({ isMonthView: isMonth }),
    }),
    {
      name: "calendar-ui-storage",
    }
  )
);

또한 zustand는 미들웨어로 Persist를 제공한다.
상태를 로컬스토리지에 저장하여 새로고침 후에도 상태를 유지할 수 있도록 할 수 있다.
위의 코드는 isMonthView 의 변수를 로컬스토리지에 저장하여

persist에 관한 이야기는 따로 또 작성하도록...

---

나는 next 프로젝트를 진행하며 Zustand를 사용했지만 react프로젝트라면 편하게 사용 가능한 전역 상태관리 라이브러리이다.
또한 persist와 같은 미들웨어를 함께 제공해주어서 추가적으로 localstorage에 접근하기 위해 추가 작업이 없어도 되는것도 편하게 사용가능해서 좋았다
앞으로 zustand와 함께 행.코 (행복코딩) 시작,,,