2026년 Zustand로 시작하는 React 전역 상태 관리 완벽 가이드

• 보일러플레이트 제로 - 설정 코드가 정말 최소한이에요
• Provider 불필요 - 컴포넌트 트리를 감쌀 필요가 없죠
• TypeScript 완벽 지원 - 타입 추론이 자동으로 되요
• DevTools 지원 - Redux DevTools랑 연동 가능해요
• 성능 최적화 - 필요한 부분만 리렌더링되거든요

npm install zustand

yarn add zustand

pnpm add zustand

import { create } from 'zustand'

interface UserState {
  name: string
  age: number
  setName: (name: string) => void
  setAge: (age: number) => void
}

const useUserStore = create<UserState>((set) => ({
  name: '',
  age: 0,
  setName: (name) => set({ name }),
  setAge: (age) => set({ age })
}))

import { create } from 'zustand'

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 })
}))

function Counter() {
  const { count, increment, decrement, reset } = useCounterStore()
  
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}

필요한 상태만 선택적으로 가져오세요. 이게 Zustand의 진짜 강점이에요. 셀렉터를 사용하면 불필요한 리렌더링을 막을 수 있거든요.

// 방법 1: 필요한 것만 가져오기
function CountDisplay() {
  const count = useCounterStore((state) => state.count)
  return <h1>{count}</h1>
}

// 방법 2: 여러 개 선택하기
function CounterActions() {
  const { increment, decrement } = useCounterStore(
    (state) => ({ 
      increment: state.increment, 
      decrement: state.decrement 
    })
  )
  
  return (
    <>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </>
  )
}

const useUserStore = create((set, get) => ({
  users: [],
  loading: false,
  error: null,
  
  // 사용자 추가
  addUser: (user) => set((state) => ({
    users: [...state.users, user]
  })),
  
  // 사용자 삭제
  removeUser: (userId) => set((state) => ({
    users: state.users.filter(u => u.id !== userId)
  })),
  
  // 사용자 수정
  updateUser: (userId, updates) => set((state) => ({
    users: state.users.map(u => 
      u.id === userId ? { ...u, ...updates } : u
    )
  })),
  
  // 비동기 작업
  fetchUsers: async () => {
    set({ loading: true, error: null })
    try {
      const response = await fetch('/api/users')
      const users = await response.json()
      set({ users, loading: false })
    } catch (error) {
      set({ error: error.message, loading: false })
    }
  },
  
  // get을 사용한 현재 상태 접근
  getUserById: (userId) => {
    const state = get()
    return state.users.find(u => u.id === userId)
  }
}))

로그인 정보나 설정값 같은 건 새로고침해도 유지되어야 하잖아요. persist 미들웨어를 쓰면 localStorage에 자동으로 저장돼요.

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

const useAuthStore = create(
  persist(
    (set) => ({
      user: null,
      token: null,
      login: (userData, token) => set({ user: userData, token }),
      logout: () => set({ user: null, token: null })
    }),
    {
      name: 'auth-storage', // localStorage 키 이름
      partialize: (state) => ({ token: state.token }) // 일부만 저장
    }
  )
)

복잡한 중첩 객체 업데이트할 때 스프레드 연산자 엄청 쓰잖아요. immer 미들웨어 쓰면 그냥 직접 수정하듯이 쓸 수 있어요.

import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'

const useCartStore = create(
  immer((set) => ({
    cart: {
      items: [],
      total: 0
    },
    
    addItem: (item) => set((state) => {
      // 이렇게 직접 수정해도 불변성 유지돼요!
      state.cart.items.push(item)
      state.cart.total += item.price
    }),
    
    updateQuantity: (itemId, quantity) => set((state) => {
      const item = state.cart.items.find(i => i.id === itemId)
      if (item) {
        item.quantity = quantity
      }
    })
  }))
)

import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'

const useStore = create(
  devtools(
    persist(
      (set) => ({
        // 상태와 액션들
      }),
      { name: 'my-storage' }
    ),
    { name: 'MyStore' } // DevTools에 표시될 이름
  )
)

미들웨어는 순서가 중요해요! 보통 devtools → persist → immer 순서로 감싸는 게 좋아요. 안 그러면 제대로 동작 안 할 수 있거든요.

// userSlice.js
export const createUserSlice = (set, get) => ({
  users: [],
  addUser: (user) => set((state) => ({ 
    users: [...state.users, user] 
  }))
})

// cartSlice.js
export const createCartSlice = (set, get) => ({
  items: [],
  addToCart: (item) => set((state) => ({ 
    items: [...state.items, item] 
  }))
})

// store.js
import { create } from 'zustand'
import { createUserSlice } from './userSlice'
import { createCartSlice } from './cartSlice'

export const useStore = create((...a) => ({
  ...createUserSlice(...a),
  ...createCartSlice(...a)
}))

const useCartStore = create((set, get) => ({
  items: [],
  
  // 일반 메서드로 계산값 제공
  getTotalPrice: () => {
    const state = get()
    return state.items.reduce((sum, item) => 
      sum + (item.price * item.quantity), 0
    )
  },
  
  getItemCount: () => {
    const state = get()
    return state.items.reduce((sum, item) => 
      sum + item.quantity, 0
    )
  }
}))

// 컴포넌트에서 사용
function CartSummary() {
  const getTotalPrice = useCartStore(state => state.getTotalPrice)
  const getItemCount = useCartStore(state => state.getItemCount)
  
  return (
    <div>
      <p>총 {getItemCount()}개 상품</p>
      <p>합계: {getTotalPrice()}원</p>
    </div>
  )
}

const initialState = {
  user: null,
  cart: [],
  preferences: {}
}

const useStore = create((set) => ({
  ...initialState,
  
  // 액션들...
  updateUser: (user) => set({ user }),
  
  // 전체 리셋
  reset: () => set(initialState),
  
  // 부분 리셋
  resetCart: () => set({ cart: [] })
}))

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useUserStore = create(
  persist(
    (set) => ({
      user: null,
      setUser: (user) => set({ user }),
      logout: () => set({ user: null }),
    }),
    {
      name: 'user-storage', // localStorage 키 이름
      partialize: (state) => ({ user: state.user }), // 일부만 저장
    }
  )
);

// 이제 새로고침해도 user 정보가 유지돼요!

• 민감한 정보(비밀번호, 토큰)는 저장하지 마세요
• partialize로 필요한 부분만 저장하는 게 좋아요
• 용량 큰 데이터는 localStorage 한계(5MB) 조심하세요
• SSR 환경에서는 hydration 문제 발생할 수 있어요

import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';

const useTaskStore = create(
  immer((set) => ({
    tasks: [],
    addTask: (task) => set((state) => {
      // 직접 수정해도 돼요! immer가 알아서 불변성 유지해줘요
      state.tasks.push(task);
    }),
    toggleTask: (id) => set((state) => {
      const task = state.tasks.find(t => t.id === id);
      if (task) task.completed = !task.completed;
    }),
  }))
);

// 중첩된 객체 업데이트도 완전 쉬워져요

// slices/userSlice.js
export const createUserSlice = (set) => ({
  user: null,
  setUser: (user) => set({ user }),
  logout: () => set({ user: null }),
});

// slices/cartSlice.js
export const createCartSlice = (set) => ({
  items: [],
  addItem: (item) => set((state) => ({ 
    items: [...state.items, item] 
  })),
  removeItem: (id) => set((state) => ({ 
    items: state.items.filter(i => i.id !== id) 
  })),
});

// store.js
import { create } from 'zustand';
import { createUserSlice } from './slices/userSlice';
import { createCartSlice } from './slices/cartSlice';

export const useStore = create((...a) => ({
  ...createUserSlice(...a),
  ...createCartSlice(...a),
}));

// 이제 관심사별로 파일 분리돼서 관리가 완전 쉬워져요!

// slices/orderSlice.js
export const createOrderSlice = (set, get) => ({
  orders: [],
  createOrder: () => {
    const { items } = get(); // 다른 슬라이스 값 가져오기
    const { user } = get();
    
    const newOrder = {
      id: Date.now(),
      userId: user?.id,
      items: items,
      createdAt: new Date(),
    };
    
    set((state) => ({
      orders: [...state.orders, newOrder],
      items: [], // 장바구니 비우기
    }));
  },
});

const useProductStore = create((set, get) => ({
  products: [],
  isLoading: false,
  error: null,
  
  fetchProducts: async () => {
    set({ isLoading: true, error: null });
    
    try {
      const response = await fetch('/api/products');
      const data = await response.json();
      set({ products: data, isLoading: false });
    } catch (error) {
      set({ error: error.message, isLoading: false });
    }
  },
  
  // 낙관적 업데이트 패턴
  addProduct: async (product) => {
    const tempId = `temp-${Date.now()}`;
    const tempProduct = { ...product, id: tempId };
    
    // 일단 UI에 먼저 반영
    set((state) => ({
      products: [...state.products, tempProduct]
    }));
    
    try {
      const response = await fetch('/api/products', {
        method: 'POST',
        body: JSON.stringify(product),
      });
      const newProduct = await response.json();
      
      // 성공하면 실제 ID로 교체
      set((state) => ({
        products: state.products.map(p => 
          p.id === tempId ? newProduct : p
        )
      }));
    } catch (error) {
      // 실패하면 롤백
      set((state) => ({
        products: state.products.filter(p => p.id !== tempId),
        error: error.message,
      }));
    }
  },
}));

// 전체 구독 (비효율적)
const { user, cart, orders } = useStore();

// 필요한 것만 구독 (효율적!)
const user = useStore((state) => state.user);
const itemCount = useStore((state) => state.items.length);

// 커스텀 비교 함수로 더 세밀하게
const user = useStore(
  (state) => state.user,
  (oldUser, newUser) => oldUser?.id === newUser?.id
);

// shallow 비교 사용
import { shallow } from 'zustand/shallow';

const { addItem, removeItem } = useStore(
  (state) => ({ 
    addItem: state.addItem, 
    removeItem: state.removeItem 
  }),
  shallow
);

• 셀렉터 사용: 필요한 상태만 구독하세요
• shallow 비교: 여러 값 구독 시 사용하세요
• 파생 상태: 계산값은 컴포넌트에서 useMemo로 처리하세요
• 액션 분리: 액션 함수는 변하지 않으니 따로 구독하세요

// store.test.js
import { renderHook, act } from '@testing-library/react';
import { useCartStore } from './store';

describe('CartStore', () => {
  beforeEach(() => {
    // 테스트마다 스토어 초기화
    useCartStore.setState({ items: [] });
  });
  
  it('아이템 추가가 잘 되나요', () => {
    const { result } = renderHook(() => useCartStore());
    
    act(() => {
      result.current.addItem({ id: 1, name: '상품' });
    });
    
    expect(result.current.items).toHaveLength(1);
  });
  
  it('아이템 제거가 잘 되나요', () => {
    const { result } = renderHook(() => useCartStore());
    
    act(() => {
      result.current.addItem({ id: 1, name: '상품' });
      result.current.removeItem(1);
    });
    
    expect(result.current.items).toHaveLength(0);
  });
});

제가 실제 프로젝트에서 쓰는 조합은 persist + immer + 슬라이싱이에요. 이 세 가지만 잘 써도 웬만한 건 다 커버돼요. 처음부터 너무 복잡하게 가지 마시고요, 기본 패턴부터 익숙해진 다음에 하나씩 추가하는 게 좋아요. 성능 문제 생기면 그때 선택적 구독 도입하면 되거든요!

• 소규모~중규모 프로젝트: 빠르게 개발하고 싶을 때
• 스타트업 MVP: 번들 크기와 개발 속도가 중요할 때
• 신규 프로젝트: 복잡한 설정 없이 바로 시작하고 싶을 때
• Redux 마이그레이션: 기존 Redux가 너무 복잡하게 느껴질 때
• 성능 최적화: 가벼운 번들 크기가 필수일 때

• 대규모 엔터프라이즈 앱: 복잡한 상태 관리가 필요할 때
• 강력한 디버깅 필요: Redux DevTools의 시간 여행 디버깅이 필수일 때
• 팀 규모가 큰 경우: 명확한 패턴과 컨벤션이 필요할 때
• 복잡한 비동기 로직: Redux-Saga, Thunk 등 미들웨어가 필요할 때
• 기존 Redux 프로젝트: 이미 Redux로 구축된 코드베이스가 있을 때

import create from 'zustand'

const useStore = create((set) => ({
  count: 0,
  user: null,
  increment: () => set((state) => ({ count: state.count + 1 })),
  setUser: (user) => set({ user })
}))

// 사용
function Counter() {
  const count = useStore((state) => state.count)
  const increment = useStore((state) => state.increment)
  
  return {count}
}

import { configureStore, createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0, user: null },
  reducers: {
    increment: (state) => { state.count += 1 },
    setUser: (state, action) => { state.user = action.payload }
  }
})

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
})

// 사용
import { useSelector, useDispatch } from 'react-redux'

function Counter() {
  const count = useSelector((state) => state.counter.count)
  const dispatch = useDispatch()
  
  return  dispatch(increment())}>{count}
}

마이그레이션을 시작하기 전에 꼭 확인하세요. 프로젝트 규모가 크다면 단계적으로 진행하는 게 좋아요. 한 번에 다 바꾸려다가 버그가 대량 발생할 수 있거든요. 저는 보통 새로운 기능부터 새 라이브러리로 작성하고, 기존 코드는 필요할 때만 천천히 마이그레이션해요.

• 도메인별로 분리: 유저, 상품, 장바구니처럼 비즈니스 도메인 단위로 나눠요
• 업데이트 빈도별 분리: 자주 바뀌는 것과 거의 안 바뀌는 것을 따로 관리해요
• 의존성별로 분리: 서로 영향을 주는 상태끼리 묶고, 독립적인 건 따로 빼요
• 페이지별 분리도 고려: 특정 페이지에서만 쓰는 상태는 그냥 거기서만 관리해요

// stores/useAuthStore.ts - 인증 관련만
export const useAuthStore = create((set) => ({
  user: null,
  isLoggedIn: false,
  login: (userData) => set({ user: userData, isLoggedIn: true }),
  logout: () => set({ user: null, isLoggedIn: false })
}));

// stores/useProductStore.ts - 상품 관련만
export const useProductStore = create((set) => ({
  products: [],
  selectedProduct: null,
  setProducts: (products) => set({ products }),
  selectProduct: (id) => set((state) => ({
    selectedProduct: state.products.find(p => p.id === id)
  }))
}));

// stores/useUIStore.ts - UI 상태만
export const useUIStore = create((set) => ({
  theme: 'light',
  sidebarOpen: false,
  toggleSidebar: () => set((state) => ({ 
    sidebarOpen: !state.sidebarOpen 
  }))
}));

// stores/useCartStore.ts
import { useAuthStore } from './useAuthStore';

export const useCartStore = create((set, get) => ({
  items: [],
  
  addItem: (product) => {
    // 다른 스토어의 상태를 직접 읽어와요
    const isLoggedIn = useAuthStore.getState().isLoggedIn;
    
    if (!isLoggedIn) {
      alert('로그인이 필요해요!');
      return;
    }
    
    set((state) => ({
      items: [...state.items, product]
    }));
  },
  
  // 구독도 가능해요
  syncWithUser: () => {
    const unsubscribe = useAuthStore.subscribe((state) => {
      if (!state.isLoggedIn) {
        // 로그아웃하면 장바구니 비우기
        set({ items: [] });
      }
    });
    return unsubscribe;
  }
}));

1. 필요한 것만 구독하기: 전체 상태 말고 필요한 부분만 가져와요
2. Selector 활용: 중복 계산을 피하려면 셀렉터 쓰세요
3. 배열 비교 주의: 얕은 비교만 하니까 배열은 새로 만들어야 해요
4. 미들웨어 적절히 사용: devtools는 개발할 때만 켜요

// ❌ 나쁜 예: 전체를 가져와서 하나만 써요
function BadComponent() {
  const store = useStore();
  return <div>{store.count}</div>;
}

// ✅ 좋은 예: 필요한 것만 골라서 가져와요
function GoodComponent() {
  const count = useStore((state) => state.count);
  return <div>{count}</div>;
}

// ✅ 더 좋은 예: 계산된 값은 셀렉터로
const useExpensiveValue = () => 
  useStore(
    (state) => state.items.filter(item => item.active).length,
    shallow // shallow 비교로 불필요한 리렌더링 방지
  );

// ✅ 여러 값이 필요할 때
function MultiValueComponent() {
  const { count, name } = useStore(
    (state) => ({ count: state.count, name: state.name }),
    shallow
  );
  return <div>{name}: {count}</div>;
}

• Redux DevTools: devtools 미들웨어로 타임트래블 디버깅 가능해요
• 콘솔 로깅: subscribe로 모든 변경 추적할 수 있어요
• React DevTools: 어떤 컴포넌트가 리렌더링되는지 확인하세요
• 커스텀 미들웨어: 로깅 미들웨어 만들어서 쓰면 편해요

import { devtools, subscribeWithSelector } from 'zustand/middleware';

// 개발 환경에서만 devtools 활성화
const useStore = create(
  devtools(
    subscribeWithSelector((set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 }))
    })),
    { name: 'MyStore' } // DevTools에 표시될 이름
  )
);

// 상태 변경 로깅
if (process.env.NODE_ENV === 'development') {
  useStore.subscribe(
    (state) => state.count,
    (count, prevCount) => {
      console.log('count 변경:', prevCount, '→', count);
    }
  );
}

// 타입 먼저 정의하고
interface UserState {
  user: User | null;
  isLoading: boolean;
  error: string | null;
  fetchUser: (id: string) => Promise<void>;
  clearError: () => void;
}

// 스토어 만들 때 타입 지정
export const useUserStore = create<UserState>()((set, get) => ({
  user: null,
  isLoading: false,
  error: null,
  
  fetchUser: async (id) => {
    set({ isLoading: true, error: null });
    try {
      const response = await fetch(`/api/users/${id}`);
      const user = await response.json();
      set({ user, isLoading: false });
    } catch (error) {
      set({ error: error.message, isLoading: false });
    }
  },
  
  clearError: () => set({ error: null })
}));

// 셀렉터도 타입 추론 완벽해요
const user = useUserStore((state) => state.user); // User | null 타입

• 비밀번호나 토큰은 절대 평문으로 저장하지 마세요
• 민감한 데이터는 sessionStorage나 메모리에만 보관하세요
• XSS 공격 방지를 위해 입력값은 항상 검증하세요
• DevTools는 프로덕션에서 반드시 비활성화하세요
• API 키 같은 건 환경변수로 관리하고 상태에 넣지 마세요

2026년 현재 가장 많이 쓰이는 Zustand 패턴은 이거예요:

1. 도메인별 스토어 분리 + 필요시 조합해서 사용
2. TypeScript 완전 활용해서 타입 안전성 확보
3. Immer 미들웨어로 불변성 관리 자동화
4. React Query와 조합해서 서버 상태는 따로 관리
5. Persist 미들웨어로 필요한 것만 로컬 저장