Zustand를 활용한 상태 관리

import { create } from 'zustand';

// 1. 상태의 타입 정의
interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
  incrementByAmount: (amount: number) => void;
}

// 2. create 함수를 사용하여 스토어 생성
//    create<T>() 제네릭을 사용하여 스토어의 상태와 액션의 타입을 명확히 지정합니다.
export const useCounterStore = create<CounterState>((set) => ({
  // 초기 상태 정의
  count: 0,

  // 상태를 업데이트하는 액션 함수 정의
  // `set` 함수를 사용하여 상태를 불변적으로 업데이트합니다.
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }), // 초기값으로 직접 설정
  incrementByAmount: (amount: number) => set((state) => ({ count: state.count + amount })),
}));

// 추가 설명:
// - `set`: 상태를 업데이트하는 함수입니다. `set(newState)` 또는 `set((state) => newState)` 형태로 사용됩니다.
// - `get`: (선택 사항) 현재 스토어의 상태를 가져올 때 사용됩니다.
// - `zustand/middleware`의 `devtools`나 `persist` 미들웨어와 함께 사용할 수 있습니다.

import React from 'react';
import { useCounterStore } from '../store/counterStore'; // 스토어 임포트

const ZustandCounter: React.FC = () => {
  // 스토어에서 원하는 상태와 액션을 선택적으로 가져올 수 있습니다.
  // 이 방식은 컴포넌트가 필요한 상태만 구독하므로 불필요한 리렌더링을 방지합니다.
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);
  const decrement = useCounterStore((state) => state.decrement);
  const reset = useCounterStore((state) => state.reset);
  const incrementByAmount = useCounterStore((state) => state.incrementByAmount);

  return (
    <div>
      <h2>Zustand Counter</h2>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
      <button onClick={() => incrementByAmount(5)}>Increment by 5</button>
    </div>
  );
};

export default ZustandCounter;

import React from 'react';
import { useCounterStore } from '../store/counterStore';

const ZustandCountDisplay: React.FC = () => {
  const count = useCounterStore((state) => state.count);

  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', marginTop: '20px' }}>
      <h3>Current Count (from another component): {count}</h3>
    </div>
  );
};

export default ZustandCountDisplay;

import React from 'react';
import ZustandCounter from './components/ZustandCounter';
import ZustandCountDisplay from './components/ZustandCountDisplay';

const App: React.FC = () => {
  return (
    <div style={{ padding: '20px' }}>
      <h1>React with Zustand & TypeScript</h1>
      <ZustandCounter />
      <ZustandCountDisplay /> {/* 같은 전역 상태를 공유 */}
    </div>
  );
};

export default App;

import { create } from 'zustand';

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

interface UserState {
  user: User | null;
  loading: boolean;
  error: string | null;
  fetchUser: (userId: number) => Promise<void>; // 비동기 액션
}

export const useUserStore = create<UserState>((set) => ({
  user: null,
  loading: false,
  error: null,

  fetchUser: async (userId: number) => {
    set({ loading: true, error: null }); // 로딩 시작, 에러 초기화
    try {
      // 가상 API 호출
      const response = await new Promise<User>((resolve, reject) => {
        setTimeout(() => {
          if (userId === 1) {
            resolve({ id: 1, name: 'Alice', email: '[email protected]' });
          } else {
            reject(new Error('User not found!'));
          }
        }, 1500);
      });
      set({ user: response, loading: false }); // 성공 시 상태 업데이트
    } catch (err: any) {
      set({ error: err.message, loading: false, user: null }); // 실패 시 에러 상태 업데이트
    }
  },
}));

import React from 'react';
import { useUserStore } from '../store/userStore';

const ZustandUserProfile: React.FC = () => {
  const { user, loading, error, fetchUser } = useUserStore();

  return (
    <div style={{ marginTop: '30px', borderTop: '1px solid #eee', paddingTop: '20px' }}>
      <h2>Zustand User Profile</h2>
      <button onClick={() => fetchUser(1)} disabled={loading}>
        {loading ? 'Fetching User 1...' : 'Fetch Alice (ID 1)'}
      </button>
      <button onClick={() => fetchUser(99)} disabled={loading} style={{ marginLeft: '10px' }}>
        {loading ? 'Fetching User 99...' : 'Fetch Non-Existent User (ID 99)'}
      </button>

      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
      {user ? (
        <div>
          <p>ID: {user.id}</p>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
        </div>
      ) : (
        !loading && !error && <p>Click a button to fetch user data.</p>
      )}
    </div>
  );
};

export default ZustandUserProfile;