React 전역 상태 관리 완벽 가이드: Context API vs Zustand vs Jotai

function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  // email, password는 이 폼에서만 필요
}ts

// 장바구니는 헤더, 상품 목록, 결제 페이지에서 모두 필요
const cart = useCartStore((state) => state.cart);ts

// 사용자 목록은 서버에서 가져온 데이터
const { data: users } = useQuery(["users"], fetchUsers);ts

function App() {
  const [user, setUser] = useState(null);

  return (
    <div>
      <Header user={user} />
      <Dashboard user={user} />
      <Footer user={user} />
    </div>
  );
}ts

function App() {
  return <Parent name="매튜" />;
}

// Parent는 name을 사용하지 않는다
function Parent({ name }: { name: string }) {
  return <Child name={name} />;
}

// Child도 name을 사용하지 않는다
function Child({ name }: { name: string }) {
  return <GrandChild name={name} />;
}

// 드디어 실제로 name을 사용한다
function GrandChild({ name }: { name: string }) {
  return <div>Hello {name}</div>;
}ts

import { createContext, useContext, useState } from "react";

interface User {
  name: string;
  role: string;
}

const UserContext = createContext<{
  user: User | null;
  setUser: (user: User | null) => void;
} | null>(null);

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

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error("useUser는 UserProvider 안에서만 사용할 수 있다");
  }
  return context;
}ts

function App() {
  return (
    <UserProvider>
      <Parent />
    </UserProvider>
  );
}

// Parent는 name을 몰라도 된다
function Parent() {
  return <Child />;
}

// Child도 name을 몰라도 된다
function Child() {
  return <GrandChild />;
}

// GrandChild만 직접 가져간다
function GrandChild() {
  const { user } = useUser();
  return <div>Hello {user?.name}</div>;
}ts

function UserProvider({ children }) {
  const [user, setUser] = useState<User | null>(null);
  const [theme, setTheme] = useState<"light" | "dark">("light");

  // value 객체가 새로 생성되면, Context를 사용하는 모든 컴포넌트가 재평가된다
  const value = { user, setUser, theme, setTheme };

  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
}ts

// Parent는 user만 사용한다
function Parent() {
  const { user } = useUser(); // theme도 value에 포함되어 있음
  return <div>{user?.name}</div>;
}

// Child는 theme만 사용한다
function Child() {
  const { theme, setTheme } = useUser(); // user도 value에 포함되어 있음
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      {theme} 모드
    </button>
  );
}ts

// UserContext와 ThemeContext를 따로 만든다
const UserContext = createContext<UserContextType | null>(null);
const ThemeContext = createContext<ThemeContextType | null>(null);

function App() {
  return (
    <UserProvider>
      <ThemeProvider>
        <Dashboard />
      </ThemeProvider>
    </UserProvider>
  );
}ts

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

  // user나 setUser가 바뀔 때만 value 재생성
  const value = useMemo(() => ({ user, setUser }), [user]);

  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
}ts

// 외부 스토어 (React 밖)
let count = 0;
const listeners = new Set();

export const store = {
  getState: () => count,
  setState: (newCount) => {
    count = newCount;
    listeners.forEach((listener) => listener());
  },
  subscribe: (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  },
};

// React 18 이전: useEffect로 구독 시도
function useStore() {
  const [state, setState] = useState(store.getState());

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setState(store.getState());
    });
    return unsubscribe;
  }, []);

  return state;
}

// 문제: Concurrent Rendering 시 일시적으로 다른 값 표시 가능
function Parent() {
  const count = useStore(); // count: 5
  return <div>{count}</div>;
}

function Child() {
  const count = useStore(); // count: 4 (일시적으로 다른 값!)
  return <div>{count}</div>;
}ts

import { useSyncExternalStore } from "react";

function useStore() {
  return useSyncExternalStore(
    store.subscribe, // 구독 함수
    store.getState, // 상태 가져오기 함수
    store.getState // 서버 사이드 렌더링용 (선택)
  );
}ts

// 단순화한 Zustand 구현
function create(createState) {
  let state = createState(setState);
  const listeners = new Set();

  function setState(partial) {
    state = { ...state, ...partial };
    listeners.forEach((listener) => listener());
  }

  function subscribe(listener) {
    listeners.add(listener);
    return () => listeners.delete(listener);
  }

  function getState() {
    return state;
  }

  // useSyncExternalStore 활용
  return function useStore(selector) {
    return useSyncExternalStore(
      subscribe,
      () => selector(getState()), // selector로 선택한 부분만
      () => selector(getState())
    );
  };
}ts

// 단순화한 Jotai atom 구현 (실제 구현과 다를 수 있음)
function atom(initialValue) {
  let value = initialValue;
  const listeners = new Set();

  return {
    read: () => value,
    write: (newValue) => {
      value = newValue;
      listeners.forEach((listener) => listener());
    },
    subscribe: (listener) => {
      listeners.add(listener);
      return () => listeners.delete(listener);
    },
  };
}

// 개념적 예시: 실제로는 useReducer 기반이지만, 외부 스토어처럼 동작한다는 개념
function useAtom(atom) {
  const [value, setValue] = useState(atom.read());

  useEffect(() => {
    return atom.subscribe(() => setValue(atom.read()));
  }, [atom]);

  return [value, atom.write];
}ts

import { create } from "zustand";

interface User {
  name: string;
  role: string;
}

interface UserStore {
  user: User | null;
  theme: "light" | "dark";
  setUser: (user: User | null) => void;
  setTheme: (theme: "light" | "dark") => void;
}

export const useUserStore = create<UserStore>((set) => ({
  user: null,
  theme: "light",
  setUser: (user) => set({ user }),
  setTheme: (theme) => set({ theme }),
}));ts

function Parent() {
  const user = useUserStore((state) => state.user);
  return <div>{user?.name}</div>;
}

function Child() {
  const theme = useUserStore((state) => state.theme);
  const setTheme = useUserStore((state) => state.setTheme);

  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      {theme} 모드
    </button>
  );
}ts

// store는 모듈 레벨에 생성되어 전역적으로 접근 가능
const store = createStore((set) => ({
  user: null,
  theme: "light",
  // ...
}));ts

// user만 구독 - theme이 바뀌어도 재렌더링 안 됨
const user = useUserStore((state) => state.user);

// theme만 구독 - user가 바뀌어도 재렌더링 안 됨
const theme = useUserStore((state) => state.theme);ts

import { useSyncExternalStore } from "react";

function create(createState) {
  // 1. 외부 store 생성 (React 밖)
  let state;
  const listeners = new Set();

  const setState = (partial) => {
    const nextState = typeof partial === "function" ? partial(state) : partial;
    if (!Object.is(nextState, state)) {
      const previousState = state;
      state = Object.assign({}, state, nextState);
      // 모든 구독자에게 알림
      listeners.forEach((listener) => listener(state, previousState));
    }
  };

  const getState = () => state;

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener); // cleanup
  };

  // 초기 상태 설정
  state = createState(setState, getState);

  // 2. React 훅 반환
  return function useStore(selector = (s) => s) {
    // useSyncExternalStore로 외부 스토어 구독
    return useSyncExternalStore(
      subscribe, // 구독 함수
      () => selector(getState()), // 현재 스냅샷
      () => selector(getState()) // SSR용 스냅샷
    );
  };
}ts

// user 변경 시
setState({ user: newUser });
// ↓
// listeners에게 알림
// ↓
// 각 컴포넌트의 useSyncExternalStore가 실행
// ↓
// selector(getState()) 재계산
// ↓
// Object.is(newValue, oldValue) 비교
// ↓
// user를 구독하는 컴포넌트만 재렌더링ts

// user 하나만 바뀌어도
setUser(newUser);

// user를 사용하지 않는 99개 컴포넌트도 재평가된다
// (실제 재렌더링은 React.memo로 막을 수 있지만, 재평가는 발생)ts

// user 하나만 바뀌면
setUser(newUser);

// user를 구독하는 컴포넌트만 재렌더링된다
// 나머지 99개는 selector가 다른 값을 반환하지 않으므로 무시ts

import { persist, devtools } from "zustand/middleware";

export const useUserStore = create<UserStore>()(
  devtools(
    persist(
      (set) => ({
        user: null,
        setUser: (user) => set({ user }),
      }),
      { name: "user-storage" } // localStorage에 자동 저장
    )
  )
);ts

// 컴포넌트 밖에서도 store에 접근
const currentUser = useUserStore.getState().user;
useUserStore.getState().setUser(newUser);ts

import { atom } from "jotai";

// 기본 atom
export const userAtom = atom<User | null>(null);
export const themeAtom = atom<"light" | "dark">("light");

// 파생 atom - userAtom이 변경되면 자동으로 재계산
export const isLoggedInAtom = atom((get) => {
  const user = get(userAtom);
  return user !== null;
});

// Write atom - 로직 캡슐화
export const logoutAtom = atom(
  null, // read 함수
  (get, set) => {
    set(userAtom, null);
  }
);ts

import { useAtom, useAtomValue, useSetAtom } from "jotai";

function Parent() {
  const [user, setUser] = useAtom(userAtom);
  const isLoggedIn = useAtomValue(isLoggedInAtom);

  return (
    <div>
      {isLoggedIn ? (
        <p>Hello {user?.name}</p>
      ) : (
        <button onClick={() => setUser({ name: "매튜", role: "admin" })}>
          로그인
        </button>
      )}
    </div>
  );
}

function Child() {
  const [theme, setTheme] = useAtom(themeAtom);

  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      {theme} 모드
    </button>
  );
}ts

import { useSyncExternalStore } from "react";

// Atom은 그저 설정 객체
function atom(initialValue) {
  return {
    init: initialValue,
    read: (get) => get(atom), // 기본 read 함수
    write: (get, set, update) => set(atom, update), // 기본 write 함수
  };
}

// 실제 값과 의존성은 WeakMap에 저장
const atomStateMap = new WeakMap(); // atom -> { value, listeners, dependencies }

function getAtomState(atom) {
  if (!atomStateMap.has(atom)) {
    atomStateMap.set(atom, {
      value: atom.init,
      listeners: new Set(),
      dependencies: new Set(), // 이 atom이 의존하는 다른 atom들
    });
  }
  return atomStateMap.get(atom);
}ts

const countAtom = atom(0);
const doubleCountAtom = atom((get) => {
  const count = get(countAtom); // get 호출 시 의존성 기록
  return count * 2;
});ts

function useAtom(atom) {
  const getAtomValue = (targetAtom) => {
    const atomState = getAtomState(targetAtom);

    // 파생 atom이면 의존성 추적하며 계산
    if (typeof targetAtom.read === "function") {
      const dependencies = new Set();

      const get = (dependencyAtom) => {
        dependencies.add(dependencyAtom); // 의존성 기록
        return getAtomValue(dependencyAtom); // 재귀적으로 값 가져오기
      };

      const value = targetAtom.read(get);
      atomState.dependencies = dependencies; // 의존성 저장
      atomState.value = value;

      // 의존하는 atom들을 구독
      dependencies.forEach((dep) => {
        const depState = getAtomState(dep);
        depState.listeners.add(() => {
          // 의존성이 변경되면 이 atom도 재계산
          notify(targetAtom);
        });
      });
    }

    return atomState.value;
  };

  const notify = (targetAtom) => {
    const atomState = getAtomState(targetAtom);
    atomState.listeners.forEach((listener) => listener());
  };

  // useSyncExternalStore로 atom 구독
  const value = useSyncExternalStore(
    (callback) => {
      const atomState = getAtomState(atom);
      atomState.listeners.add(callback);
      return () => atomState.listeners.delete(callback);
    },
    () => getAtomValue(atom),
    () => getAtomValue(atom)
  );

  const setValue = (update) => {
    const atomState = getAtomState(atom);
    atomState.value =
      typeof update === "function" ? update(atomState.value) : update;
    notify(atom);
  };

  return [value, setValue];
}ts

const userAtom = atom({ name: "매튜", age: 30 });

const userNameAtom = atom((get) => get(userAtom).name);
const doubleAgeAtom = atom((get) => get(userAtom).age * 2);ts

userAtom
  ├─> userNameAtom (의존)
  └─> doubleAgeAtom (의존)

// userAtom 변경
setUserAtom({ name: "존", age: 35 });
// ↓
// userAtom의 listeners 실행
// ↓
// userNameAtom과 doubleAgeAtom 재계산
// ↓
// 각 atom을 구독하는 컴포넌트만 재렌더링ts

// Zustand: Top-down
const useStore = create((set) => ({
  user: { name: "매튜", age: 30 },
  theme: "light",
}));

const userName = useStore((s) => s.user.name); // selector로 쪼개기

// Jotai: Bottom-up
const userAtom = atom({ name: "매튜", age: 30 });
const themeAtom = atom("light");
const userNameAtom = atom((get) => get(userAtom).name); // atom 조합ts

import { Provider } from "jotai";

function App() {
  return (
    <Provider>
      <Dashboard />
    </Provider>
  );
}ts

// 하나의 store에 모든 상태
const useStore = create((set) => ({
  user: null,
  theme: "light",
  cart: [],
  notifications: [],
  // ... 모든 전역 상태가 여기 있음
}));ts

// 각각 독립적인 atom
const userAtom = atom(null);
const themeAtom = atom("light");
const cartAtom = atom([]);
const notificationsAtom = atom([]);ts

// Provider의 value가 바뀌면
<UserContext.Provider value={{ user, theme }}>

// useContext를 사용하는 모든 컴포넌트가 재평가된다
const { user } = useContext(UserContext); // theme이 바뀌어도 재렌더링ts

// selector가 반환하는 값이 바뀔 때만 재렌더링
const user = useUserStore((state) => state.user); // theme 변경 → 재렌더링 안 됨
const theme = useUserStore((state) => state.theme); // user 변경 → 재렌더링 안 됨ts

// 구독한 atom이 변경될 때만 재렌더링
const [user] = useAtom(userAtom); // themeAtom 변경 → 재렌더링 안 됨
const [theme] = useAtom(themeAtom); // userAtom 변경 → 재렌더링 안 됨ts

// ❌ 나쁜 예 - 모달 열림/닫힘도 전역으로
const useUIStore = create((set) => ({
  isLoginModalOpen: false,
  isSignupModalOpen: false,
  isDeleteConfirmOpen: false,
  // ... 모든 UI 상태를 전역으로
}));

// ✅ 좋은 예 - 로컬로 충분한 것은 로컬로
function LoginButton() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsModalOpen(true)}>로그인</button>
      {isModalOpen && <LoginModal onClose={() => setIsModalOpen(false)} />}
    </>
  );
}ts

// ❌ 나쁜 예 - API 데이터를 useState에 저장
function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch("/api/products")
      .then((res) => res.json())
      .then((data) => {
        setProducts(data);
        setLoading(false);
      });
  }, []);

  return loading ? <div>로딩 중...</div> : <ul>{/* ... */}</ul>;
}ts

// ✅ 좋은 예 - TanStack Query 사용
import { useQuery } from "@tanstack/react-query";

function ProductList() {
  const { data: products, isLoading } = useQuery({
    queryKey: ["products"],
    queryFn: () => fetch("/api/products").then((res) => res.json()),
  });

  if (isLoading) return <div>로딩 중...</div>;
  return <ul>{/* ... */}</ul>;
}ts

// ❌ 나쁜 예 - 모든 상태를 하나의 Context에
const AppContext = createContext({
  user: null,
  theme: "light",
  language: "ko",
  cart: [],
  notifications: [],
  sidebar: { isOpen: false },
  // ... 10개 이상의 상태
});

// theme만 바뀌어도 user, cart를 사용하는 컴포넌트도 재렌더링ts

// ✅ 좋은 예 - Context 분리 또는 Zustand 사용
const useAppStore = create((set) => ({
  user: null,
  theme: "light",
  language: "ko",
  cart: [],
  // ... selector로 선택적 구독
}));ts

// ❌ 나쁜 예 - 성능 문제도 없는데 과도한 최적화
const memoizedUser = useMemo(() => user, [user]);
const memoizedTheme = useMemo(() => theme, [theme]);
const memoizedCallback = useCallback(() => {}, []);
// ... 모든 것에 useMemo, useCallbackts

1. 이 상태를 여러 컴포넌트가 공유하나?
   NO → useState (로컬 상태)
   YES → 다음으로

2. 상태가 자주 변경되나? (1초에 여러 번)
   NO → `Context API`도 충분
   YES → 다음으로

3. 파생 상태가 많나? (계산된 값, 필터링)
   YES → `Jotai` (원자적 상태 + 의존성 그래프)
   NO → `Zustand` (간단한 전역 상태)

4. 서버에서 가져온 데이터인가?
   YES → TanStack Query (다음 글에서 다룸)

// ✅ 좋은 예 - 인증 상태
function App() {
  return (
    <AuthProvider>
      <Header /> {/* 로그인 상태에 따라 UI 변경 */}
      <Sidebar /> {/* 권한에 따라 메뉴 표시 */}
      <Content /> {/* 사용자 정보 표시 */}
    </AuthProvider>
  );
}ts

// ✅ 좋은 예 - 장바구니
const useCartStore = create((set) => ({
  items: [],
  addItem: (item) =>
    set((state) => ({
      items: [...state.items, item],
    })),
  // updateQuantity, removeItem, clearCart 등 추가 액션들...
}));

// 여러 컴포넌트가 서로 다른 부분만 구독
function CartButton() {
  const itemCount = useCartStore((s) => s.items.length);
  return <button>장바구니 ({itemCount})</button>;
}

function TotalPrice() {
  const total = useCartStore((s) =>
    s.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
  );
  return <div>총 {total}원</div>;
}ts

// ✅ 좋은 예 - 파생 상태 조합
const productsAtom = atom([
  /* 제품 리스트 */
]);
const categoryFilterAtom = atom("전자기기");
const minPriceAtom = atom(0);
const maxPriceAtom = atom(1000000);

// atom을 조합해서 파생 상태 생성
const filteredProductsAtom = atom((get) => {
  const products = get(productsAtom);
  const category = get(categoryFilterAtom);
  const minPrice = get(minPriceAtom);
  const maxPrice = get(maxPriceAtom);

  return products.filter(
    (p) => p.category === category && p.price >= minPrice && p.price <= maxPrice
  );
});

// avgPriceAtom, totalCountAtom 등 추가 파생 atom도 동일한 방식으로 조합 가능ts

// Client State는 Zustand로
const useUIStore = create((set) => ({
  sidebar: { isOpen: false },
  modal: { activeModal: null },
  theme: "light",
}));

// Server State는 TanStack Query로
function ProductList() {
  const { data, isLoading } = useQuery({
    queryKey: ["products"],
    queryFn: fetchProducts,
  });

  const sidebar = useUIStore((state) => state.sidebar);

  // Server State와 Client State를 함께 사용
}ts

// 이렇게 작성했을 것이다
function LikeButton({ postId }) {
  const [isLiked, setIsLiked] = useState(false);

  const handleLike = async () => {
    setIsLiked(true); // 먼저 UI 업데이트

    try {
      await fetch(`/api/posts/${postId}/like`, { method: "POST" });
    } catch (error) {
      setIsLiked(false); // 실패하면 되돌리기
      // 그런데 성공했는데도 서버 상태와 안 맞는 경우는?
    }
  };

  return <button onClick={handleLike}>{isLiked ? "❤️" : "🤍"}</button>;
}ts