[NEXT.JS] Zustand

개요

Zustand는 간단하면서도 강력한 상태 관리 라이브러리입니다. React 애플리케이션에서 전역 상태를 쉽게 관리할 수 있게 해주며, Redux와 비교했을 때 훨씬 더 간단하고 직관적인 API를 제공합니다.

Zustand는 독일어로 "상태"를 의미하며, React의 Hooks를 기반으로 합니다.

 

 

특징

간단한 API

Zustand는 매우 간단한 API를 제공하여, 몇 줄의 코드만으로 상태를 정의하고 사용할 수 있습니다.

이는 Redux와 같은 복잡한 설정 없이도 쉽게 상태 관리를 할 수 있게 해줍니다.

import create from 'zustand';

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

// 컴포넌트에서 상태 사용
const Counter = () => {
  const { count, increment, decrement } = useStore();
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

 

미들웨어 지원

Zustand는 미들웨어를 지원하여 로컬 스토리지에 상태를 저장하거나 리덕스 개발자 도구와 통합할 수 있습니다.

이를 통해 상태 관리의 유연성과 확장성을 높일 수 있습니다.

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

const useStore = create(
  devtools(
    persist(
      set => ({
        count: 0,
        increment: () => set(state => ({ count: state.count + 1 })),
      }),
      { name: 'count-storage' } // 로컬 스토리지 키 이름
    )
  )
);

 

선택적 구독

Zustand는 상태의 일부만 선택적으로 구독할 수 있도록 하여, 성능을 최적화하고 불필요한 리렌더링을 줄입니다.

이는 특히 대규모 애플리케이션에서 유용합니다.

import create from 'zustand';

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

const Counter = () => {
  const count = useStore(state => state.count);
  const increment = useStore(state => state.increment);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

 

React Context와의 통합

Zustand는 React Context와 쉽게 통합할 수 있어, 상태를 전역으로 공유하는 데 유용합니다.

이는 기존의 Context API를 대체하거나 보완하는 데 사용할 수 있습니다.

import create from 'zustand';

const useStore = create(set => ({
  darkMode: false,
  toggleDarkMode: () => set(state => ({ darkMode: !state.darkMode })),
}));

const ThemeToggle = () => {
  const { darkMode, toggleDarkMode } = useStore();

  return (
    <button onClick={toggleDarkMode}>
      {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
    </button>
  );
};

export default ThemeToggle;

 

 

설치

npm install zustand
또는
yarn add zustand

 

 

문의사항이나 피드백은 댓글로 남겨주세요.