[Next.js] Context API vs 써드파티 솔루션

작성자:


React 애플리케이션에서 상태 관리 방법을 선택할 때, 개발자들이 가장 고민하는 질문 중 하나는 “React의 내장 Context API를 사용할 것인가, 아니면 Zustand, Redux Toolkit 같은 써드파티 솔루션을 도입할 것인가?”입니다.

Context API는 React에 내장되어 있어 추가 의존성 없이 즉시 사용할 수 있는 반면, 써드파티 솔루션들은 더 강력한 기능과 최적화를 제공합니다. 이 글에서는 두 접근 방식의 장단점, 성능 특성, 그리고 언제 어떤 방법을 선택해야 하는지에 대한 실용적인 가이드를 제공합니다.

Context API: React의 내장 상태 관리

Context API는 React 16.3에서 정식으로 도입된 상태 관리 메커니즘으로, props drilling 없이 컴포넌트 트리 전반에 걸쳐 데이터를 공유할 수 있게 해줍니다.

Context API의 기본 구조

import React, { createContext, useContext, useReducer, useState } from 'react';

// 1. Context 생성
const AppContext = createContext();

// 2. Provider 컴포넌트
function AppProvider({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  const [notifications, setNotifications] = useState([]);

  const value = {
    user,
    setUser,
    theme,
    setTheme,
    notifications,
    setNotifications,
  };

  return (
    <AppContext.Provider value={value}>
      {children}
    </AppContext.Provider>
  );
}

// 3. 커스텀 훅으로 사용 편의성 개선
function useAppContext() {
  const context = useContext(AppContext);
  if (!context) {
    throw new Error('useAppContext must be used within AppProvider');
  }
  return context;
}

// 4. 컴포넌트에서 사용
function UserProfile() {
  const { user, setUser } = useAppContext();
  
  return (
    <div>
      {user ? (
        <div>
          <h1>안녕하세요, {user.name}님!</h1>
          <button onClick={() => setUser(null)}>로그아웃</button>
        </div>
      ) : (
        <button onClick={() => setUser({ name: '홍길동' })}>
          로그인
        </button>
      )}
    </div>
  );
}

function ThemeToggle() {
  const { theme, setTheme } = useAppContext();
  
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      {theme === 'light' ? '다크 모드' : '라이트 모드'}
    </button>
  );
}

Context API의 장점

1. 내장 솔루션

  • 추가 의존성 없음
  • React 업데이트와 함께 안정적으로 유지
  • 번들 크기에 영향 없음

2. 간단한 설정

  • 복잡한 설정이나 보일러플레이트 불필요
  • React 패턴과 일관성 유지

3. TypeScript 친화적

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

const AppContext = createContext<AppContextType | null>(null);

function useAppContext(): AppContextType {
  const context = useContext(AppContext);
  if (!context) {
    throw new Error('useAppContext must be used within AppProvider');
  }
  return context;
}

Context API의 한계와 성능 문제

1. 불필요한 리렌더링

// 문제가 있는 구현
function ProblemProvider({ children }) {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);
  const [theme, setTheme] = useState('light');
  
  // 모든 상태가 하나의 Context에 있음
  const value = { user, setUser, posts, setPosts, theme, setTheme };
  
  return (
    <AppContext.Provider value={value}>
      {children}
    </AppContext.Provider>
  );
}

// user만 필요한 컴포넌트도 posts나 theme 변경 시 리렌더링됨
function UserDisplay() {
  const { user } = useAppContext(); // posts 변경 시에도 리렌더링!
  return <div>{user?.name}</div>;
}

2. Context 분할을 통한 최적화

// 개선된 구현: Context 분할
const UserContext = createContext();
const ThemeContext = createContext();
const PostsContext = createContext();

function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 중첩된 Provider들
function App() {
  return (
    <UserProvider>
      <ThemeProvider>
        <PostsProvider>
          <MainContent />
        </PostsProvider>
      </ThemeProvider>
    </UserProvider>
  );
}

// 이제 user만 구독
function UserDisplay() {
  const { user } = useContext(UserContext); // theme 변경 시 리렌더링 안됨
  return <div>{user?.name}</div>;
}

3. 메모이제이션을 통한 최적화

import React, { createContext, useContext, useState, useMemo, useCallback } from 'react';

function OptimizedProvider({ children }) {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);
  
  // 함수들을 useCallback으로 메모이제이션
  const updateUser = useCallback((newUser) => {
    setUser(newUser);
  }, []);
  
  const addPost = useCallback((post) => {
    setPosts(prev => [...prev, post]);
  }, []);
  
  // value 객체를 useMemo로 메모이제이션
  const value = useMemo(() => ({
    user,
    updateUser,
    posts,
    addPost,
  }), [user, updateUser, posts, addPost]);
  
  return (
    <AppContext.Provider value={value}>
      {children}
    </AppContext.Provider>
  );
}

// React.memo로 컴포넌트 메모이제이션
const UserDisplay = React.memo(function UserDisplay() {
  const { user } = useAppContext();
  return <div>{user?.name}</div>;
});

써드파티 솔루션의 장점

써드파티 상태 관리 라이브러리들은 Context API의 한계를 해결하고 추가적인 기능을 제공합니다.

1. Zustand의 선택적 구독

import { create } from 'zustand';

const useAppStore = create((set, get) => ({
  // 상태
  user: null,
  posts: [],
  theme: 'light',
  isLoading: false,
  
  // 액션
  setUser: (user) => set({ user }),
  addPost: (post) => set((state) => ({ 
    posts: [...state.posts, post] 
  })),
  setTheme: (theme) => set({ theme }),
  setLoading: (isLoading) => set({ isLoading }),
  
  // 계산된 값
  getPostCount: () => get().posts.length,
}));

// 선택적 구독으로 성능 최적화
function UserDisplay() {
  // user만 구독 - posts나 theme 변경 시 리렌더링 안됨
  const user = useAppStore(state => state.user);
  return <div>{user?.name}</div>;
}

function PostList() {
  // posts만 구독 - user나 theme 변경 시 리렌더링 안됨
  const posts = useAppStore(state => state.posts);
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

2. Jotai의 원자적 상태 관리

import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';

// 원자적 상태 정의
const userAtom = atom(null);
const postsAtom = atom([]);
const themeAtom = atom('light');

// 파생된 원자
const userNameAtom = atom((get) => get(userAtom)?.name || '게스트');
const postCountAtom = atom((get) => get(postsAtom).length);

// 액션 원자
const addPostAtom = atom(null, (get, set, newPost) => {
  const currentPosts = get(postsAtom);
  set(postsAtom, [...currentPosts, newPost]);
});

// 컴포넌트에서 사용
function UserDisplay() {
  const userName = useAtomValue(userNameAtom); // 자동 최적화
  return <div>{userName}</div>;
}

function PostStats() {
  const postCount = useAtomValue(postCountAtom); // posts 개수만 추적
  return <span>{postCount}개의 게시물</span>;
}

function AddPostForm() {
  const addPost = useSetAtom(addPostAtom); // setter만 가져옴
  
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    addPost({
      id: Date.now(),
      title: formData.get('title'),
      content: formData.get('content'),
    });
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input name="title" placeholder="제목" />
      <textarea name="content" placeholder="내용" />
      <button type="submit">게시물 추가</button>
    </form>
  );
}

3. Redux Toolkit의 구조화된 관리

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

// 사용자 슬라이스
const userSlice = createSlice({
  name: 'user',
  initialState: { profile: null, preferences: {} },
  reducers: {
    setUser: (state, action) => {
      state.profile = action.payload;
    },
    updatePreferences: (state, action) => {
      state.preferences = { ...state.preferences, ...action.payload };
    },
    logout: (state) => {
      state.profile = null;
      state.preferences = {};
    },
  },
});

// 게시물 슬라이스
const postsSlice = createSlice({
  name: 'posts',
  initialState: { items: [], isLoading: false },
  reducers: {
    setPosts: (state, action) => {
      state.items = action.payload;
    },
    addPost: (state, action) => {
      state.items.push(action.payload);
    },
    setLoading: (state, action) => {
      state.isLoading = action.payload;
    },
  },
});

// 스토어 설정
const store = configureStore({
  reducer: {
    user: userSlice.reducer,
    posts: postsSlice.reducer,
  },
});

// 사용법
function UserProfile() {
  const user = useSelector(state => state.user.profile);
  const dispatch = useDispatch();
  
  return (
    <div>
      <h1>{user?.name}</h1>
      <button onClick={() => dispatch(userSlice.actions.logout())}>
        로그아웃
      </button>
    </div>
  );
}

성능 비교: 실제 측정 결과

리렌더링 테스트

// 테스트 시나리오: 1000개 컴포넌트 중 1개 상태만 변경
// React DevTools Profiler로 측정

// Context API (최적화 전)
const ContextTestApp = () => {
  const [count, setCount] = useState(0);
  const [users, setUsers] = useState(generateUsers(1000));
  
  const value = { count, setCount, users, setUsers };
  
  return (
    <TestContext.Provider value={value}>
      {users.map(user => (
        <UserCard key={user.id} user={user} /> // 모든 UserCard가 리렌더링
      ))}
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
    </TestContext.Provider>
  );
};

// Zustand 테스트
const useTestStore = create((set) => ({
  count: 0,
  users: generateUsers(1000),
  setCount: () => set(state => ({ count: state.count + 1 })),
  setUsers: (users) => set({ users }),
}));

const ZustandTestApp = () => {
  const users = useTestStore(state => state.users);
  const count = useTestStore(state => state.count);
  const setCount = useTestStore(state => state.setCount);
  
  return (
    <div>
      {users.map(user => (
        <UserCard key={user.id} user={user} /> // users 관련 상태만 구독하므로 리렌더링 안됨
      ))}
      <button onClick={setCount}>Count: {count}</button>
    </div>
  );
};

// 성능 측정 결과
// Context API: 1000개 컴포넌트 모두 리렌더링 (약 15ms)
// Context API (최적화 후): 1개 컴포넌트만 리렌더링 (약 2ms)
// Zustand: 1개 컴포넌트만 리렌더링 (약 1.5ms)

메모리 사용량 비교

// 메모리 프로파일링 결과 (Chrome DevTools Memory tab)

// Context API
// - Provider마다 추가 메모리 사용
// - 중첩된 Provider로 인한 메모리 오버헤드
// - 메모이제이션을 위한 추가 메모리

// Zustand
// - 단일 스토어로 최소한의 메모리 사용
// - 선택적 구독으로 메모리 효율성

// Jotai
// - 원자 단위로 분산되어 있어 필요한 부분만 메모리 사용
// - 사용하지 않는 원자는 가비지 컬렉션 대상

실제 사용 사례별 비교

1. 간단한 테마 관리

Context API (추천):

// 간단한 테마 상태는 Context API가 적합
const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  const toggleTheme = useCallback(() => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  }, []);
  
  const value = useMemo(() => ({
    theme,
    toggleTheme,
  }), [theme, toggleTheme]);
  
  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

// 사용법이 간단하고 직관적
function Header() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <header className={theme}>
      <button onClick={toggleTheme}>테마 변경</button>
    </header>
  );
}

2. 복잡한 사용자 관리

써드파티 솔루션 (추천):

// Zustand로 복잡한 사용자 상태 관리
const useUserStore = create((set, get) => ({
  // 상태
  currentUser: null,
  userPreferences: {},
  userHistory: [],
  notifications: [],
  
  // 액션
  login: async (credentials) => {
    set({ isLoading: true });
    try {
      const user = await authAPI.login(credentials);
      const preferences = await userAPI.getPreferences(user.id);
      const history = await userAPI.getHistory(user.id);
      
      set({
        currentUser: user,
        userPreferences: preferences,
        userHistory: history,
        isLoading: false,
      });
    } catch (error) {
      set({ error: error.message, isLoading: false });
    }
  },
  
  updatePreferences: async (newPreferences) => {
    const { currentUser } = get();
    if (!currentUser) return;
    
    try {
      await userAPI.updatePreferences(currentUser.id, newPreferences);
      set(state => ({
        userPreferences: { ...state.userPreferences, ...newPreferences }
      }));
    } catch (error) {
      set({ error: error.message });
    }
  },
  
  addNotification: (notification) => set(state => ({
    notifications: [...state.notifications, {
      id: Date.now(),
      ...notification,
      timestamp: new Date(),
    }]
  })),
  
  removeNotification: (id) => set(state => ({
    notifications: state.notifications.filter(n => n.id !== id)
  })),
  
  logout: () => set({
    currentUser: null,
    userPreferences: {},
    userHistory: [],
    notifications: [],
  }),
}));

// 각 컴포넌트가 필요한 부분만 구독
function UserProfile() {
  const { currentUser, userPreferences } = useUserStore(
    state => ({ 
      currentUser: state.currentUser, 
      userPreferences: state.userPreferences 
    })
  );
  
  return (
    <div>
      <h1>{currentUser?.name}</h1>
      <p>언어: {userPreferences.language}</p>
    </div>
  );
}

function NotificationBell() {
  const notifications = useUserStore(state => state.notifications);
  const removeNotification = useUserStore(state => state.removeNotification);
  
  return (
    <div className="notification-bell">
      <span className="badge">{notifications.length}</span>
      <div className="dropdown">
        {notifications.map(notification => (
          <div key={notification.id}>
            {notification.message}
            <button onClick={() => removeNotification(notification.id)}>×</button>
          </div>
        ))}
      </div>
    </div>
  );
}

3. 실시간 데이터 관리

Jotai (추천):

import { atom, useAtom } from 'jotai';

// WebSocket 연결을 위한 원자
const wsConnectionAtom = atom(null);

// 실시간 데이터를 위한 원자들
const liveUsersAtom = atom([]);
const liveChatAtom = atom([]);
const liveNotificationsAtom = atom([]);

// WebSocket 관리 원자
const wsManagerAtom = atom(
  (get) => get(wsConnectionAtom),
  (get, set, action) => {
    const ws = get(wsConnectionAtom);
    
    switch (action.type) {
      case 'CONNECT':
        if (ws) return; // 이미 연결됨
        
        const newWs = new WebSocket('ws://localhost:8080');
        
        newWs.onmessage = (event) => {
          const data = JSON.parse(event.data);
          
          switch (data.type) {
            case 'USERS_UPDATE':
              set(liveUsersAtom, data.users);
              break;
            case 'CHAT_MESSAGE':
              set(liveChatAtom, prev => [...prev, data.message]);
              break;
            case 'NOTIFICATION':
              set(liveNotificationsAtom, prev => [...prev, data.notification]);
              break;
          }
        };
        
        newWs.onclose = () => {
          set(wsConnectionAtom, null);
          // 자동 재연결 로직
          setTimeout(() => {
            set(wsManagerAtom, { type: 'CONNECT' });
          }, 3000);
        };
        
        set(wsConnectionAtom, newWs);
        break;
        
      case 'DISCONNECT':
        if (ws) {
          ws.close();
          set(wsConnectionAtom, null);
        }
        break;
    }
  }
);

// 컴포넌트별로 필요한 실시간 데이터만 구독
function LiveUserList() {
  const [users] = useAtom(liveUsersAtom);
  
  return (
    <div>
      <h3>온라인 사용자 ({users.length}명)</h3>
      {users.map(user => (
        <div key={user.id} className="user-status">
          <span className="online-indicator">●</span>
          {user.name}
        </div>
      ))}
    </div>
  );
}

function LiveChat() {
  const [messages] = useAtom(liveChatAtom);
  const [, sendMessage] = useAtom(wsManagerAtom);
  
  const handleSendMessage = (message) => {
    sendMessage({
      type: 'SEND_MESSAGE',
      message
    });
  };
  
  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, index) => (
          <div key={index} className="message">
            <strong>{msg.user}:</strong> {msg.text}
          </div>
        ))}
      </div>
      <MessageInput onSend={handleSendMessage} />
    </div>
  );
}

하이브리드 접근법: 상황에 따른 혼합 사용

실제 프로젝트에서는 두 접근 방식을 적절히 조합하여 사용하는 것이 효과적입니다.

// 전역 설정은 Context API로
const GlobalSettingsContext = createContext();

function GlobalSettingsProvider({ children }) {
  const [settings, setSettings] = useState({
    language: 'ko',
    timezone: 'Asia/Seoul',
    theme: 'light',
  });
  
  const updateSettings = useCallback((newSettings) => {
    setSettings(prev => ({ ...prev, ...newSettings }));
  }, []);
  
  const value = useMemo(() => ({
    settings,
    updateSettings,
  }), [settings, updateSettings]);
  
  return (
    <GlobalSettingsContext.Provider value={value}>
      {children}
    </GlobalSettingsContext.Provider>
  );
}

// 복잡한 앱 상태는 Zustand로
const useAppStore = create((set, get) => ({
  // 사용자 관련 복잡한 상태
  user: null,
  userActivity: [],
  userPreferences: {},
  
  // 앱 데이터
  posts: [],
  comments: {},
  
  // 액션들
  setUser: (user) => set({ user }),
  addActivity: (activity) => set(state => ({
    userActivity: [...state.userActivity, activity]
  })),
  // ... 기타 복잡한 액션들
}));

// 앱 루트에서 조합
function App() {
  return (
    <GlobalSettingsProvider>
      <Router>
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/posts" element={<PostList />} />
        </Routes>
      </Router>
    </GlobalSettingsProvider>
  );
}

// 컴포넌트에서 두 방식 모두 사용
function UserDashboard() {
  // 전역 설정은 Context에서
  const { settings } = useContext(GlobalSettingsContext);
  
  // 앱 상태는 Zustand에서
  const { user, userActivity } = useAppStore(
    state => ({ user: state.user, userActivity: state.userActivity })
  );
  
  return (
    <div className={`dashboard ${settings.theme}`}>
      <h1>{settings.language === 'ko' ? '대시보드' : 'Dashboard'}</h1>
      <UserInfo user={user} />
      <ActivityFeed activities={userActivity} />
    </div>
  );
}

마이그레이션 전략

Context API에서 써드파티 솔루션으로

// 1단계: 기존 Context API 구조
const UserContext = createContext();

function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  
  const login = async (credentials) => {
    setIsLoading(true);
    try {
      const user = await authAPI.login(credentials);
      setUser(user);
    } finally {
      setIsLoading(false);
    }
  };
  
  return (
    <UserContext.Provider value={{ user, login, isLoading }}>
      {children}
    </UserContext.Provider>
  );
}

// 2단계: 점진적 마이그레이션을 위한 래퍼
const useUserStore = create((set) => ({
  user: null,
  isLoading: false,
  login: async (credentials) => {
    set({ isLoading: true });
    try {
      const user = await authAPI.login(credentials);
      set({ user, isLoading: false });
    } catch (error) {
      set({ isLoading: false, error });
    }
  },
}));

// 기존 Context와 호환성 유지
function UserProvider({ children }) {
  const store = useUserStore();
  
  return (
    <UserContext.Provider value={store}>
      {children}
    </UserContext.Provider>
  );
}

// 3단계: 새 컴포넌트는 직접 store 사용
function NewUserProfile() {
  const { user, login } = useUserStore();
  // Zustand를 직접 사용
}

// 4단계: 기존 컴포넌트 점진적 업데이트
function ExistingUserProfile() {
  const { user, login } = useContext(UserContext);
  // 기존 Context API 방식 유지 (호환성)
}

써드파티에서 Context API로 (단순화)

// 복잡한 Zustand store를 간단한 Context로 변경
const useComplexStore = create((set, get) => ({
  user: null,
  theme: 'light',
  // ... 많은 상태와 액션들
}));

// 단순화된 Context로 변경
const SimpleContext = createContext();

function SimpleProvider({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  
  const value = useMemo(() => ({
    user,
    setUser,
    theme,
    setTheme,
  }), [user, theme]);
  
  return (
    <SimpleContext.Provider value={value}>
      {children}
    </SimpleContext.Provider>
  );
}

// 마이그레이션 유틸리티
function createContextFromStore(store) {
  const Context = createContext();
  
  function Provider({ children }) {
    const storeValue = store();
    return (
      <Context.Provider value={storeValue}>
        {children}
      </Context.Provider>
    );
  }
  
  return { Context, Provider };
}

선택 가이드: 언제 무엇을 사용할까?

Context API를 선택해야 하는 경우

✅ 다음과 같은 상황에서 Context API 사용 권장:

  1. 단순한 전역 상태
    • 테마 설정 (다크/라이트 모드)
    • 언어 설정 (i18n)
    • 사용자 인증 상태 (간단한 로그인/로그아웃)
  2. 의존성을 추가하고 싶지 않은 경우
    • 라이브러리나 플러그인 개발 시
    • 번들 크기가 중요한 프로젝트
  3. 학습 곡선을 낮추고 싶은 경우
    • 팀원이 React 초보자인 경우
    • 빠른 프로토타이핑이 필요한 경우
// Context API가 적합한 예시
function SimpleThemeProvider({ children }) {
  const [isDark, setIsDark] = useState(false);
  
  const toggleTheme = useCallback(() => {
    setIsDark(prev => !prev);
  }, []);
  
  const value = useMemo(() => ({
    isDark,
    toggleTheme,
  }), [isDark, toggleTheme]);
  
  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

써드파티 솔루션을 선택해야 하는 경우

✅ 다음과 같은 상황에서 써드파티 솔루션 사용 권장:

  1. 복잡한 상태 로직
    • 여러 단계의 데이터 변환
    • 복잡한 비동기 작업
    • 상태 간 의존성이 많은 경우
  2. 성능이 중요한 경우
    • 대량의 데이터 처리
    • 빈번한 상태 업데이트
    • 세밀한 리렌더링 제어 필요
  3. 고급 기능이 필요한 경우
    • 시간 여행 디버깅
    • 미들웨어나 플러그인 시스템
    • 개발자 도구 통합
// 써드파티 솔루션이 적합한 예시
const useComplexAppStore = create((set, get) => ({
  // 복잡한 상태 구조
  entities: {
    users: {},
    posts: {},
    comments: {},
  },
  ui: {
    currentPage: 'home',
    modals: {},
    notifications: [],
  },
  cache: {
    queries: new Map(),
    lastFetch: {},
  },
  
  // 복잡한 비동기 액션
  fetchUserWithPosts: async (userId) => {
    const { cache } = get();
    const cacheKey = `user-${userId}`;
    
    if (cache.queries.has(cacheKey)) {
      return cache.queries.get(cacheKey);
    }
    
    set({ isLoading: true });
    
    try {
      const [user, posts] = await Promise.all([
        api.getUser(userId),
        api.getUserPosts(userId),
      ]);
      
      set(state => ({
        entities: {
          ...state.entities,
          users: { ...state.entities.users, [userId]: user },
          posts: { ...state.entities.posts, ...indexBy(posts, 'id') },
        },
        cache: {
          ...state.cache,
          queries: state.cache.queries.set(cacheKey, { user, posts }),
          lastFetch: { ...state.cache.lastFetch, [cacheKey]: Date.now() },
        },
        isLoading: false,
      }));
      
      return { user, posts };
    } catch (error) {
      set({ error, isLoading: false });
      throw error;
    }
  },
}));

성능 최적화 전략

Context API 최적화

// 1. Context 분할
const UserContext = createContext();
const ThemeContext = createContext();
const NotificationContext = createContext();

// 2. 메모이제이션 최적화
function OptimizedProvider({ children }) {
  const [user, setUser] = useState(null);
  
  const userActions = useMemo(() => ({
    login: async (credentials) => {
      const user = await authAPI.login(credentials);
      setUser(user);
    },
    logout: () => setUser(null),
    updateProfile: (data) => setUser(prev => ({ ...prev, ...data })),
  }), []); // 의존성 배열이 비어있어 한 번만 생성됨
  
  const value = useMemo(() => ({
    user,
    ...userActions,
  }), [user, userActions]);
  
  return (
    <UserContext.Provider value={value}>
      {children}
    </UserContext.Provider>
  );
}

// 3. 선택적 리렌더링
const UserDisplayMemo = React.memo(function UserDisplay() {
  const { user } = useContext(UserContext);
  return <div>{user?.name}</div>;
});

// 4. 커스텀 훅으로 최적화
function useUserName() {
  const { user } = useContext(UserContext);
  return useMemo(() => user?.name, [user?.name]);
}

써드파티 솔루션 최적화

// Zustand 최적화
const useOptimizedStore = create((set, get) => ({
  // 상태 정규화
  entities: {
    users: {},
    posts: {},
  },
  
  // 배치 업데이트
  batchUpdate: (updates) => {
    set(state => {
      let newState = { ...state };
      updates.forEach(update => {
        newState = update(newState);
      });
      return newState;
    });
  },
  
  // 메모이제이션된 셀렉터
  selectors: {
    getUserById: (userId) => get().entities.users[userId],
    getPostsByUser: (userId) => 
      Object.values(get().entities.posts)
        .filter(post => post.authorId === userId),
  },
}));

// 사용 시 최적화
function UserPosts({ userId }) {
  const posts = useOptimizedStore(
    useCallback(state => 
      Object.values(state.entities.posts)
        .filter(post => post.authorId === userId),
      [userId]
    )
  );
  
  return (
    <div>
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

실제 프로젝트 결정 사례

사례 1: 스타트업 MVP

상황: 빠른 개발, 적은 팀원, 단순한 요구사항 선택: Context API 결과:

  • 개발 시간 50% 단축
  • 번들 크기 최소화
  • 팀원 온보딩 용이
// MVP에서 사용한 간단한 구조
const AppContext = createContext();

function AppProvider({ children }) {
  const [user, setUser] = useState(null);
  const [products, setProducts] = useState([]);
  const [cart, setCart] = useState([]);
  
  const addToCart = useCallback((product) => {
    setCart(prev => [...prev, product]);
  }, []);
  
  const value = useMemo(() => ({
    user, setUser,
    products, setProducts,
    cart, addToCart,
  }), [user, products, cart, addToCart]);
  
  return (
    <AppContext.Provider value={value}>
      {children}
    </AppContext.Provider>
  );
}

사례 2: 대규모 대시보드

상황: 복잡한 데이터 관계, 실시간 업데이트, 성능 중요 선택: Zustand + Jotai 조합 결과:

  • 리렌더링 90% 감소
  • 메모리 사용량 최적화
  • 복잡한 상태 로직 관리 용이
// 대시보드에서 사용한 복합 구조
// Zustand: 전역 앱 상태
const useDashboardStore = create((set, get) => ({
  currentWorkspace: null,
  widgets: [],
  filters: {},
  // ... 복잡한 로직들
}));

// Jotai: 위젯별 개별 상태
const widgetDataAtomFamily = atomFamily((widgetId) =>
  atom(async () => {
    const response = await api.getWidgetData(widgetId);
    return response.data;
  })
);

// 각 위젯이 독립적으로 상태 관리
function Widget({ widgetId }) {
  const [data] = useAtom(widgetDataAtomFamily(widgetId));
  // 다른 위젯 업데이트 시 영향받지 않음
}

마무리

Context API와 써드파티 상태 관리 솔루션 중 어떤 것을 선택할지는 프로젝트의 특성, 팀의 역량, 성능 요구사항 등을 종합적으로 고려해야 합니다.

Context API가 적합한 경우:

  • 간단한 전역 상태 관리 필요
  • 추가 의존성을 피하고 싶음
  • 빠른 개발과 학습이 우선
  • 번들 크기가 중요한 프로젝트

써드파티 솔루션이 적합한 경우:

  • 복잡한 상태 로직과 데이터 플로우
  • 성능 최적화가 중요
  • 고급 디버깅 도구 필요
  • 대규모 팀 개발 프로젝트

많은 경우에는 두 방식을 적절히 조합하여 사용하는 것이 가장 실용적입니다. 단순한 설정 상태는 Context API로, 복잡한 비즈니스 로직은 써드파티 솔루션으로 관리하면 각각의 장점을 극대화할 수 있습니다.

중요한 것은 처음부터 완벽한 선택을 하려고 하기보다는, 프로젝트가 성장하면서 필요에 따라 점진적으로 마이그레이션할 수 있는 유연한 아키텍처를 설계하는 것입니다. React의 생태계는 충분히 성숙했으므로, 어떤 선택을 하더라도 좋은 개발자 경험과 사용자 경험을 제공할 수 있습니다.



댓글 남기기