[React] Zustand 라이브러리 사용 예제

📌 Zustand를 활용한 React 전역 상태 관리

---

🔹 Zustand란?

• 독일어로 '상태(state)'를 뜻하는 단어
• React Hooks 기반의 경량 전역 상태 관리 라이브러리
• 최소한의 API로 간단하게 전역 상태를 생성하고 사용할 수 있음

📦 설치 방법:

npm install zustand

---

🔹 Zustand의 장점

1. 🧩 간결성
   • 최소한의 코드로 상태 관리
2. 🔄 유연성
   • 여러 상태 조각을 하나의 저장소에서 결합

---

🔹 Zustand 기본 사용법

1️⃣ 전역 상태 저장소(store) 생성

// store/count.store.ts
import { create } from "zustand";

interface CountState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

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

2️⃣ 컴포넌트에서 사용

import React from "react";
import { useCountStore } from "@/stores/count.store";

function CounterComponent() {
  const { count, increment, decrement } = useCountStore();
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>증가</button>
      <button onClick={decrement}>감소</button>
    </div>
  );
}

---

🔹 사용자 인증 스토어 예제

// store/auth.store.ts
import { create } from "zustand";

interface AuthState {
  user: string | null;
  isLogged: boolean;
  login: (user: string) => void;
  logout: () => void;
}

export const useAuthStore = create<AuthState>((set) => ({
  user: null,
  isLogged: false,
  login: (user) => set({ user, isLogged: true }),
  logout: () => set({ user: null, isLogged: false }),
}));

// 로그인 컴포넌트
import React, { useState } from "react";
import { useAuthStore } from "@/stores/auth.store";

const Login = () => {
  const [username, setUsername] = useState('');
  const { login } = useAuthStore();

  return (
    <>
      <input value={username} onChange={(e) => setUsername(e.target.value)} />
      <button onClick={() => login(username)}>로그인</button>
    </>
  );
};

---

🔹 사용자 목록 관리 예제

// store/user.store.ts
import { create } from "zustand";

interface User {
  id: number;
  name: string;
}

interface UserState {
  users: User[];
  addUser: (user: User) => void;
  updateUser: (id: number, name: string) => void;
  deleteUser: (id: number) => void;
}

export const useUsersStore = create<UserState>((set) => ({
  users: [],
  addUser: (user) => set((state) => ({ users: [...state.users, user] })),
  updateUser: (id, name) =>
    set((state) => ({
      users: state.users.map((user) =>
        user.id === id ? { ...user, name } : user
      ),
    })),
  deleteUser: (id) =>
    set((state) => ({
      users: state.users.filter((user) => user.id !== id),
    })),
}));

// Zustand02.tsx
import React, { useRef } from "react";
import { useAuthStore } from "@/stores/auth.store";
import { useUsersStore } from "@/stores/user.store";

function Zustand02() {
  const { users, addUser } = useUsersStore();
  const { user, logout } = useAuthStore();
  const userIdRef = useRef(1);

  const handleCreate = () => {
    addUser({ id: userIdRef.current, name: '전창현' });
    userIdRef.current += 1;
  };

  return (
    <div>
      {users.map((user) => (
        <div key={user.id}>
          {user.id} / {user.name}
        </div>
      ))}
      <button onClick={handleCreate}>사용자 추가</button>
      <br />
      <p>Welcome: {user}</p>
      <Login />
      <button onClick={logout}>로그아웃</button>
    </div>
  );
}

---

🚀 마무리: Zustand 사용 포인트

• useStoreName 패턴으로 스토어를 정의하고 가져와 사용
• create() 함수로 상태 + 업데이트 메서드를 한 번에 선언
• 컴포넌트는 store에서 필요한 속성만 선택적으로 구독 가능