Next.js에서 Zustand를 활용한 간편하고 효율적인 상태 관리

 

• Zustand 라이브러리의 개념과 장점
• Redux, Context API와의 비교를 통해 장단점 소개
• Next.js 애플리케이션에서 간단하고 효율적으로 상태 관리하는 방법 소개

npm install zustand

 

store/useStore.js (Zustand 상태 관리)

import { create } from 'zustand';

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

export default useStore;

 

components/Counter.js

'use client';

import useStore from '../store/useStore';

export default function Counter() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <h1>Zustand 카운터 예제</h1>
      <p>카운트: {count}</p>
      <button onClick={increment}>증가</button>
      <button onClick={decrement}>감소</button>
    </div>
  );
}

 

Zustand는 간단한 상태 관리에서 큰 효율성을 제공하며 코드 복잡성을 줄임