zustand 기초(2.26~27)

설치하기

npm i zustand

store.ts

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

// 상태 타입 정의
interface CounterState {
  count: number;
  increase: () => void;
  decrease: () => void;
}

// 스토어 생성
const useCounterStore = create<CounterState>()(
  persist(
    (set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
      decrease: () => set((state) => ({ count: state.count - 1 })),
    }),
    { name: "counter-storage" } // 로컬 스토리지 키
  )
);

export default useCounterStore;

page.tsx

"use client";
import useCounterStore from "./store"; 

function Counter() {
  // 상태 가져오기
  const { count, increase, decrease } = useCounterStore();

  return (
    <div>
      <h1>Counter</h1>
      <h2>{count}</h2>
      <button onClick={increase}>
        +
      </button>
      <button onClick={decrease}>-</button>
    </div>
  );
}

export default Counter;

전역 변수로 사용할 값

Components 제작 진행 중 props drilling이 심하게 발생하는 부분은 관리가 필요하다고 생각

예상 page