Zustand 핵심 개념 파헤치기 - Zustand 기초부터 아키텍쳐 설계까지 2편

Deep Dive into Zustand's Core Concepts - From Basics to Architecture Part 2

 
// 1. 상태(State)와 행동(Actions)에 대한 타입 정의
interface UserState {
  name: string;
  email: string;
  isLoggedIn: boolean;
}
 
interface UserActions {
  setName: (name: string) => void;
  login: (email: string) => void;
  logout: () => void;
}
 
// 2. 두 타입을 합쳐 스토어의 전체 타입을 정의
type UserStore = UserState & UserActions;

import { create } from 'zustand'
 
// ... 타입 정의에 이어서 작성 ...
 
// 3. create 함수에 타입을 적용하여 스토어 생성
const useUserStore = create<UserStore>((set) => ({
  // 초기 상태 (State)
  name: 'Guest',
  email: '',
  isLoggedIn: false,
 
  // 상태를 변경하는 함수들 (Actions)
  setName: (newName) => set({ name: newName }),
 
  login: (userEmail) => set({ 
    isLoggedIn: true, 
    email: userEmail,
    name: '사용자' // 로그인 시 기본 이름 설정
  }),
 
  logout: () => set({ 
    isLoggedIn: false, 
    email: '', 
    name: 'Guest' 
  }),
}));
 
export default useUserStore;

import useUserStore from '../store/userStore';
 
function UserProfile() {
  // 스토어의 모든 것을 가져옵니다.
  const { name, email, isLoggedIn } = useUserStore();
 
  console.log('UserProfile 컴포넌트가 리렌더링 되었습니다!');
 
  return (
    <div>
      <p>이름: {name}</p>
      <p>이메일: {email}</p>
      <p>로그인 상태: {isLoggedIn ? '로그인 됨' : '로그아웃 됨'}</p>
    </div>
  );
}

import useUserStore from '../store/userStore';
 
function UserNameDisplay() {
  // state 객체에서 name 속성만 선택합니다.
  const name = useUserStore((state) => state.name);
 
  console.log('UserNameDisplay 컴포넌트가 리렌더링 되었습니다!');
 
  return <p>사용자 이름: {name}</p>;
}

// 이렇게 사용하면 안 됩니다!
const { name, login } = useUserStore((state) => ({ 
  name: state.name, 
  login: state.login 
}));

import useUserStore from '../store/userStore';
import { shallow } from 'zustand/shallow';
 
function LoginManager() {
  // shallow 함수를 두 번째 인자로 전달합니다.
  const { name, login, logout } = useUserStore(
    (state) => ({
      name: state.name,
      login: state.login,
      logout: state.logout,
    }),
    shallow // 이 부분이 핵심인데, shallow를 사용하면 객체 내부의 값들을 1단계 깊이에서 비교합니다.
  );
 
  console.log('LoginManager 컴포넌트가 리렌더링 되었습니다!');
  // ...
}

// utils/api.ts
import useUserStore from '../store/userStore';
 
function sendAnalyticsEvent(eventName: string) {
  // 훅을 사용하지 않고 현재 상태에 접근합니다.
  const { email, isLoggedIn } = useUserStore.getState();
 
  if (isLoggedIn) {
    console.log(`이벤트 전송: ${eventName}, 사용자: ${email}`);
    // api.send({ event: eventName, user: email });
  }
}

// logger.ts
import useUserStore from './store/userStore';
 
console.log('초기 이름:', useUserStore.getState().name);
 
// 상태 변경을 구독합니다.
const unsubscribe = useUserStore.subscribe(
  (state, prevState) => {
    // state: 변경 후 상태, prevState: 변경 전 상태
    if (state.name !== prevState.name) {
      console.log(`이름이 변경되었습니다: ${prevState.name} -> ${state.name}`);
    }
  }
);
 
// 나중에 구독을 취소하고 싶을 때 이 함수를 호출합니다.
// unsubscribe();

// 나쁜 예: 상태를 직접 수정 (Don't do this!)
// set((state) => {
//   state.isLoggedIn = true; // 원본 state 객체를 직접 변경
//   return state;
// });
 
// 좋은 예: 새로운 객체를 반환
set((state) => ({ isLoggedIn: true }));