zustand 사용 예(ts) - 회원 정보 관리 - 기초적이고 심플한 개인정보(CRUD) 코드 샘플

1. 스토어 정의 (src/store/useUserStore.ts)

import { create } from 'zustand';

// 1. 데이터 타입 정의
interface User {
  name: string;
  age: number;
}

// 2. 스토어 상태 및 액션 타입 정의
interface UserState {
  user: User | null;
  setProfile: (user: User) => void;     // Create / Save
  updateName: (name: string) => void;   // Update
  clearProfile: () => void;             // Delete
}

// 3. 스토어 생성
export const useUserStore = create<UserState>((set) => ({
  user: null,
  
  // 저장
  setProfile: (user) => set({ user }),
  
  // 이름만 부분 수정
  updateName: (name) => set((state) => ({
    user: state.user ? { ...state.user, name } : null
  })),
  
  // 삭제 (초기화)
  clearProfile: () => set({ user: null }),
}));

 

 

2. 리액트 컴포넌트 (src/App.tsx)

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

export default function App() {
  // 스토어에서 상태와 액션 가져오기
  const user = useUserStore((state) => state.user);
  const setProfile = useUserStore((state) => state.setProfile);
  const updateName = useUserStore((state) => state.updateName);
  const clearProfile = useUserStore((state) => state.clearProfile);

  return (
    <div style={{ padding: '20px' }}>
      <h2>심플한 Zustand 개인정보 샘플</h2>

      {!user ? (
        <button onClick={() => setProfile({ name: '홍길동', age: 25 })}>
          개인정보 등록 (Create)
        </button>
      ) : (
        <div>
          <p>이름: {user.name}</p>
          <p>나이: {user.age}</p>

          <button onClick={() => updateName('김철수')} style={{ marginRight: '8px' }}>
            이름 수정 (Update)
          </button>
          <button onClick={clearProfile} style={{ backgroundColor: 'red', color: 'white' }}>
            개인정보 삭제 (Delete)
          </button>
        </div>
      )}
    </div>
  );
}

 

3. 컴포넌트 외부 사용 (src/utils/userUtil.ts)

import { useUserStore } from '../store/useUserStore';

// 컴포넌트 외부(일반 TS 파일)에서 현재 상태를 읽거나 수정하는 예시
export const logUserInfo = () => {
  const currentUser = useUserStore.getState().user;
  console.log('현재 사용자:', currentUser);
};