📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - Next.js에서 전역 상태 관리 적용하기

📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - Next.js에서 전역 상태 관리 적용하기

1. 전역 상태 관리란?

전역 상태 관리(Global State Management)는 애플리케이션의 여러 컴포넌트에서 공유하는 데이터(예: 사용자 정보, 장바구니, 테마 설정 등)를 효율적으로 관리하는 방법입니다.
쇼핑몰 애플리케이션에서는 사용자의 로그인 상태, 장바구니 데이터, 결제 정보 등을 전역으로 관리해야 합니다.

✅ 전역 상태 관리가 필요한 이유

• 여러 페이지에서 동일한 데이터를 사용 가능 (예: 로그인 정보)
• props-drilling(부모 → 자식 컴포넌트로 데이터 전달) 문제 해결
• 상태가 일관성 있게 유지되며, 변경이 즉시 반영됨

💡 이 챕터에서는 React Context API와 Zustand를 활용하여 전역 상태 관리를 구현하는 방법을 다룹니다.

---

2. 전역 상태 관리 도구 비교

상태 관리 라이브러리 특징 쇼핑몰 프로젝트 적용 여부

React Context API	기본 제공, 간단한 전역 상태 관리 가능	✅ 사용
Zustand	가볍고 사용법이 간단하며, Redux보다 직관적	✅ 사용
Redux Toolkit	복잡한 상태 관리 가능, 대형 프로젝트에 적합	❌ (이 프로젝트에서는 사용 X)
Recoil	Facebook 개발, 최신 상태 관리 방식 지원	❌ (기본적인 상태 관리에는 과함)

💡 쇼핑몰 프로젝트에서는 React Context API와 Zustand를 함께 사용하여 상태를 관리합니다.

---

3. React Context API를 활용한 전역 상태 관리

3.1. AuthContext - 사용자 인증 상태 관리

사용자의 로그인 상태를 관리하기 위해 AuthContext를 생성합니다.

💡 context/AuthContext.tsx

import { createContext, useState, useContext, ReactNode } from 'react';

type User = {
  id: number;
  name: string;
  email: string;
};

type AuthContextType = {
  user: User | null;
  login: (userData: User) => void;
  logout: () => void;
};

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const login = (userData: User) => {
    setUser(userData);
    localStorage.setItem('user', JSON.stringify(userData)); // 로컬 스토리지에 저장
  };

  const logout = () => {
    setUser(null);
    localStorage.removeItem('user');
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

✅ 이제 AuthProvider를 _app.tsx에 추가하면 모든 페이지에서 로그인 상태를 공유할 수 있습니다.

---

3.2. _app.tsx에서 AuthProvider 적용

import { AuthProvider } from '../context/AuthContext';

export default function MyApp({ Component, pageProps }) {
  return (
    <AuthProvider>
      <Component {...pageProps} />
    </AuthProvider>
  );
}

✅ 이제 useAuth() 훅을 사용하여 로그인 상태를 가져올 수 있습니다.

---

3.3. 로그인 및 로그아웃 기능 구현

반응형

💡 로그인 버튼 클릭 시 useAuth 훅을 사용하여 로그인 상태를 업데이트합니다.

import { useAuth } from '../context/AuthContext';

export default function LoginPage() {
  const { login } = useAuth();

  const handleLogin = () => {
    const userData = { id: 1, name: 'John Doe', email: 'john@example.com' };
    login(userData);
  };

  return <button onClick={handleLogin}>로그인</button>;
}

✅ 로그인 후 모든 페이지에서 useAuth()로 사용자 정보를 확인할 수 있습니다.

---

4. Zustand를 활용한 전역 상태 관리 (장바구니 예제)

4.1. Zustand란?

Zustand는 간단하면서도 강력한 전역 상태 관리 라이브러리입니다.

• Redux보다 코드가 짧고 간결함
• Context API보다 상태 관리가 쉽고 성능이 뛰어남
• Vanilla JavaScript 스타일의 상태 관리 가능

---

4.2. Zustand 설치 및 기본 사용법

npm install zustand

💡 Zustand의 기본 사용법 (store/cartStore.ts)

import create from 'zustand';

type CartItem = {
  id: number;
  name: string;
  price: number;
  quantity: number;
};

type CartState = {
  cart: CartItem[];
  addToCart: (item: CartItem) => void;
  removeFromCart: (id: number) => void;
};

export const useCartStore = create<CartState>((set) => ({
  cart: [],
  addToCart: (item) =>
    set((state) => ({ cart: [...state.cart, item] })),
  removeFromCart: (id) =>
    set((state) => ({ cart: state.cart.filter((item) => item.id !== id) })),
}));

✅ 이제 Zustand를 활용하여 장바구니 상태를 전역으로 관리할 수 있습니다.

---

4.3. 장바구니 추가 및 삭제 기능 구현

💡 상품 페이지에서 Zustand를 활용하여 장바구니 상태 관리

import { useCartStore } from '../store/cartStore';

export default function ProductPage({ product }) {
  const { addToCart, removeFromCart, cart } = useCartStore();

  return (
    <div>
      <h1>{product.name}</h1>
      <button onClick={() => addToCart({ id: product.id, name: product.name, price: product.price, quantity: 1 })}>
        장바구니 추가
      </button>
      <button onClick={() => removeFromCart(product.id)}>장바구니 삭제</button>

      <h2>장바구니 목록</h2>
      <ul>
        {cart.map((item) => (
          <li key={item.id}>{item.name} - {item.quantity}개</li>
        ))}
      </ul>
    </div>
  );
}

✅ 이제 장바구니 상태가 전체 애플리케이션에서 공유됩니다.

---

5. 전역 상태 관리 적용 후의 이점

✅ React Context API를 활용하여 로그인 상태를 관리
✅ Zustand를 활용하여 장바구니 상태를 효율적으로 관리
✅ 전역 상태를 관리하여 props-drilling 문제 해결
✅ 데이터가 일관성 있게 유지되며, 변경이 즉시 반영됨

---

🎯 마무리하며

이번 챕터에서는 Next.js에서 전역 상태 관리(React Context API & Zustand)를 활용하여 사용자 인증 및 장바구니 상태를 관리하는 방법을 다뤘습니다.
다음 단계에서는 4.4. Next.js에서 API 호출 및 데이터 페칭 최적화를 다룰 예정입니다. 🚀

---