zustand5 zustand 사용 예(ts) - 회원 정보 관리 - Persist 적용 O 1. 스토어 정의 파일 (src/store/useProfileStore.ts)// src/store/useProfileStore.tsimport { create } from 'zustand';import { persist, createJSONStorage } from 'zustand/middleware';// 1. 개인 정보 데이터 모델 인터페이스 정의export interface Profile { id: string; name: string; email: string; phone: string; address: string;}// 2. 스토어 상태 및 액션 인터페이스 정의interface ProfileState { profile: Profile | null; isLoading: boolea.. 2026. 10. 16. zustand 사용 예 (ts) - 로그인 인증 샘플 - Persist 사용 O 1. 스토어 정의 파일 (src/store/useAuthStore.ts)// src/store/useAuthStore.tsimport { create } from 'zustand';import { persist, createJSONStorage } from 'zustand/middleware';// 1. 데이터 모델 및 스토어 인터페이스 정의export interface User { id: string; name: string; email: string;}interface AuthState { user: User | null; token: string | null; isAuthenticated: boolean; isLoading: boolean; error: string | null; /.. 2026. 10. 16. zustand 사용 예(ts) - 회원 정보 관리 - Persist 적용x 1. 스토어 정의 파일 (src/store/useProfileStore.ts)// src/store/useProfileStore.tsimport { create } from 'zustand';// 1. 개인 정보 데이터 모델 인터페이스 정의export interface Profile { id: string; name: string; email: string; phone: string; address: string;}// 2. 스토어 상태 및 액션 인터페이스 정의interface ProfileState { profile: Profile | null; isLoading: boolean; error: string | null; // Actions (CRUD) fetchProfile: () =.. 2026. 10. 16. 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((.. 2026. 10. 16. zustand 사용 (js) - todo list sample 1. 패키지 설치npm install zustand# 또는yarn add zustand 2. 스토어(Store) 정의 파일 (src/store/useStore.js)import { create } from 'zustand';// create 함수를 이용해 스토어를 생성합니다.// set: 상태를 업데이트(병합)하는 함수// get: 현재 스토어의 상태를 조회할 수 있는 함수export const useStore = create((set, get) => ({ // ============================== // 1. 카운터 관련 상태 및 액션 // ============================== count: 0, // 1씩 증가시키는 액션 increase: () => s.. 2026. 10. 16. 이전 1 다음