React Context API: 상태 관리

React Context API는 컴포넌트 트리 전체에 데이터를 쉽게 공유할 수 있는 강력한 상태 관리 도구입니다. 복잡한 prop drilling 없이도 컴포넌트 간 데이터를 효율적으로 전달할 수 있는 방법을 제공합니다. 이 글에서는 Context API의 기본 개념부터 실제 구현 방법, 고급 패턴까지 상세히 알아보겠습니다.

Context API란 무엇인가?

Context API는 React에서 제공하는 기능으로, 컴포넌트 트리 전체에 데이터를 전달할 수 있는 방법입니다. 일반적인 props를 통한 데이터 전달은 중간 컴포넌트들을 거쳐야 하지만(prop drilling), Context를 사용하면 직접적인 전달이 가능해 코드가 더 깔끔해지고 유지보수가 용이해집니다.

Context API vs Props 전달

특징 Context API Props 전달

데이터 전달 방식	컴포넌트 트리 전체에 데이터 공유	부모에서 자식으로 단계적 전달
코드 복잡성	중앙화된 상태 관리로 간결	깊은 컴포넌트 트리에서 복잡해짐
성능 영향	Context 변경 시 소비하는 모든 컴포넌트 리렌더링	관련 컴포넌트만 리렌더링
적합한 상황	테마, 사용자 인증, 언어 설정 등 전역 상태	지역적 상태나 제한된 범위의 데이터 전달
디버깅 난이도	데이터 흐름 추적이 복잡할 수 있음	명시적 데이터 흐름으로 추적 용이

Context API의 작동 원리

Context API는 기본적으로 다음과 같은 단계로 작동합니다:

Context 생성: React.createContext로 새 Context 객체를 생성합니다.
Provider 설정: Context.Provider로 데이터를 제공할 컴포넌트 트리를 감쌉니다.
Consumer 사용: useContext 훅이나 Context.Consumer를 통해 데이터를 소비합니다.
데이터 갱신: Provider의 value 값이 변경되면 해당 Context를 사용하는 모든 컴포넌트가 리렌더링됩니다.

[Context 생성] --> [Provider 설정] --> [Consumer 사용]
       |                  |                  |
       |                  V                  |
       |        [데이터와 함께 컴포넌트 렌더링]   |
       |                  |                  |
       V                  V                  V
[Context 값 변경] --> [Provider 업데이트] --> [Consumer 리렌더링]

Context API 구현 방법

기본적인 Context 생성 및 사용

// ThemeContext.js - Context 생성
import { createContext, useState, useContext } from 'react';

// 기본값으로 Context 생성
const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {}
});

// Provider 컴포넌트 생성
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };
  
  const value = {
    theme,
    toggleTheme
  };
  
  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

// 커스텀 훅으로 Context 사용 간소화
export function useTheme() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

애플리케이션에 Context 적용하기

// App.js - Provider 적용
import { ThemeProvider } from './ThemeContext';
import ThemedButton from './ThemedButton';
import ThemedHeader from './ThemedHeader';

function App() {
  return (
    <ThemeProvider>
      <div className="app">
        <ThemedHeader />
        <main>
          <h1>Context API 예제</h1>
          <ThemedButton />
        </main>
      </div>
    </ThemeProvider>
  );
}

// ThemedButton.js - Context 소비
import { useTheme } from './ThemeContext';

function ThemedButton() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <button 
      onClick={toggleTheme}
      style={{ 
        backgroundColor: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#333' : '#fff',
        padding: '10px 20px',
        border: '1px solid #ccc',
        borderRadius: '4px'
      }}
    >
      현재 테마: {theme} (클릭하여 변경)
    </button>
  );
}

export default ThemedButton;

고급 Context API 패턴

여러 Context 조합하기

// 여러 Context를 결합하는 컴포넌트
import { ThemeProvider } from './ThemeContext';
import { AuthProvider } from './AuthContext';
import { LocaleProvider } from './LocaleContext';

function AppProviders({ children }) {
  return (
    <ThemeProvider>
      <AuthProvider>
        <LocaleProvider>
          {children}
        </LocaleProvider>
      </AuthProvider>
    </ThemeProvider>
  );
}

export default AppProviders;

Context와 Reducer 결합

// UserContext.js - Context와 Reducer 조합
import { createContext, useContext, useReducer } from 'react';

// 초기 상태
const initialState = {
  user: null,
  isLoading: false,
  error: null
};

// 리듀서 함수
function userReducer(state, action) {
  switch (action.type) {
    case 'LOGIN_START':
      return { ...state, isLoading: true, error: null };
    case 'LOGIN_SUCCESS':
      return { ...state, isLoading: false, user: action.payload };
    case 'LOGIN_FAILURE':
      return { ...state, isLoading: false, error: action.payload };
    case 'LOGOUT':
      return { ...state, user: null };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

// Context 생성
const UserContext = createContext();
const UserDispatchContext = createContext();

// Provider 컴포넌트
export function UserProvider({ children }) {
  const [state, dispatch] = useReducer(userReducer, initialState);
  
  return (
    <UserContext.Provider value={state}>
      <UserDispatchContext.Provider value={dispatch}>
        {children}
      </UserDispatchContext.Provider>
    </UserContext.Provider>
  );
}

// 커스텀 훅
export function useUser() {
  const context = useContext(UserContext);
  if (context === undefined) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
}

export function useUserDispatch() {
  const context = useContext(UserDispatchContext);
  if (context === undefined) {
    throw new Error('useUserDispatch must be used within a UserProvider');
  }
  return context;
}

성능 최적화: Context 분리

// 데이터와 액션을 별도 Context로 분리
import { createContext, useContext, useState } from 'react';

// 데이터 Context
const CartItemsContext = createContext([]);

// 액션 Context
const CartDispatchContext = createContext(null);

export function CartProvider({ children }) {
  const [items, setItems] = useState([]);
  
  const addToCart = (product) => {
    setItems(prevItems => [...prevItems, product]);
  };
  
  const removeFromCart = (productId) => {
    setItems(prevItems => prevItems.filter(item => item.id !== productId));
  };
  
  const dispatch = { addToCart, removeFromCart };
  
  return (
    <CartDispatchContext.Provider value={dispatch}>
      <CartItemsContext.Provider value={items}>
        {children}
      </CartItemsContext.Provider>
    </CartDispatchContext.Provider>
  );
}

// 필요한 Context만 분리해서 사용
export function useCartItems() {
  return useContext(CartItemsContext);
}

export function useCartDispatch() {
  return useContext(CartDispatchContext);
}

Context API 실제 활용 사례

다국어 지원 시스템

// LocaleContext.js - 다국어 지원 Context
import { createContext, useContext, useState } from 'react';

// 사용 가능한 언어와 번역 정의
const translations = {
  en: {
    greeting: 'Hello',
    welcome: 'Welcome to our app',
    login: 'Log in',
    signup: 'Sign up'
  },
  ko: {
    greeting: '안녕하세요',
    welcome: '우리 앱에 오신 것을 환영합니다',
    login: '로그인',
    signup: '회원가입'
  },
  ja: {
    greeting: 'こんにちは',
    welcome: 'アプリへようこそ',
    login: 'ログイン',
    signup: '新規登録'
  }
};

const LocaleContext = createContext();

export function LocaleProvider({ children }) {
  const [locale, setLocale] = useState('en');
  
  const changeLocale = (newLocale) => {
    if (translations[newLocale]) {
      setLocale(newLocale);
    }
  };
  
  const t = (key) => {
    return translations[locale][key] || key;
  };
  
  const value = {
    locale,
    changeLocale,
    t
  };
  
  return (
    <LocaleContext.Provider value={value}>
      {children}
    </LocaleContext.Provider>
  );
}

export function useLocale() {
  const context = useContext(LocaleContext);
  if (context === undefined) {
    throw new Error('useLocale must be used within a LocaleProvider');
  }
  return context;
}

사용자 인증 관리

// AuthContext.js - 인증 관리 Context
import { createContext, useContext, useState, useEffect } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  // 초기 인증 상태 확인
  useEffect(() => {
    const checkAuthStatus = async () => {
      try {
        // localStorage 또는 API를 통한 인증 확인
        const token = localStorage.getItem('authToken');
        if (token) {
          const response = await fetch('/api/validate-token', {
            headers: { Authorization: `Bearer ${token}` }
          });
          
          if (response.ok) {
            const userData = await response.json();
            setUser(userData);
          } else {
            // 토큰이 유효하지 않으면 삭제
            localStorage.removeItem('authToken');
          }
        }
      } catch (error) {
        console.error('인증 확인 실패:', error);
      } finally {
        setLoading(false);
      }
    };
    
    checkAuthStatus();
  }, []);
  
  // 로그인 함수
  const login = async (credentials) => {
    setLoading(true);
    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(credentials)
      });
      
      if (response.ok) {
        const data = await response.json();
        localStorage.setItem('authToken', data.token);
        setUser(data.user);
        return { success: true };
      } else {
        const error = await response.json();
        return { success: false, error: error.message };
      }
    } catch (error) {
      return { success: false, error: error.message };
    } finally {
      setLoading(false);
    }
  };
  
  // 로그아웃 함수
  const logout = () => {
    localStorage.removeItem('authToken');
    setUser(null);
  };
  
  const value = {
    user,
    loading,
    login,
    logout,
    isAuthenticated: !!user
  };
  
  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

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

Context API 사용 시 모범 사례

1. 최적화를 위한 메모이제이션

// Provider 값 메모이제이션
import { useMemo } from 'react';

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  const toggleTheme = useCallback(() => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  }, []);
  
  // value 객체 메모이제이션
  const value = useMemo(() => {
    return { theme, toggleTheme };
  }, [theme, toggleTheme]);
  
  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

2. Context 사용 범위 최소화

// 필요한 컴포넌트만 감싸기
function App() {
  return (
    <div className="app">
      <Header /> {/* Context 사용 안 함 */}
      
      {/* Context가 필요한 컴포넌트만 Provider로 감싸기 */}
      <ThemeProvider>
        <MainContent />
      </ThemeProvider>
      
      <Footer /> {/* Context 사용 안 함 */}
    </div>
  );
}

3. 개발자 도구 통합

// 개발 환경에서만 디버깅 도구 제공
import { useDebugValue } from 'react';

export function useTheme() {
  const context = useContext(ThemeContext);
  
  // 개발자 도구에서 현재 테마 표시
  useDebugValue(context.theme);
  
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  
  return context;
}

대표적인 Context API 사용 라이브러리

라이브러리 주요 기능 활용 분야

React Router	라우팅 컨텍스트 제공	페이지 이동, URL 파라미터 접근
Material-UI	테마 컨텍스트	UI 컴포넌트 스타일링
React Query	쿼리 캐시 컨텍스트	데이터 페칭 상태 관리
Formik	폼 컨텍스트	복잡한 폼 상태 및 유효성 검사
React Redux	스토어 컨텍스트	대규모 상태 관리

결론

React Context API는 컴포넌트 간 데이터 공유를 위한 강력하고 유연한 도구입니다. 간단한 전역 상태부터 복잡한 애플리케이션 상태 관리까지 다양한 상황에서 활용할 수 있습니다. 물론 모든 상태 관리 문제에 Context가 최선은 아니며, 경우에 따라 props 전달이나 상태 관리 라이브러리를 고려해야 할 수도 있습니다.

Context API를 효과적으로 사용하려면 성능 최적화, 적절한 구조화, 그리고 애플리케이션의 특성에 맞는 설계가 중요합니다. 이 가이드를 통해 Context API의 기본 개념부터 고급 패턴까지 이해하고, 여러분의 React 애플리케이션에 성공적으로 적용하시기 바랍니다.

현대 React 개발에서 Context API는 단순한 기능을 넘어 애플리케이션 아키텍처의 핵심 요소로 자리 잡았습니다. 컴포넌트 구조를 깔끔하게 유지하면서도 데이터 흐름을 효과적으로 관리할 수 있는 Context API의 가능성을 최대한 활용해 보세요.

저작자표시 비영리 변경금지

'TypeScript' 카테고리의 다른 글

Next.js Script 컴포넌트 : 최적화된 스크립트 로딩 (1)	2025.04.13
웹사이트 SEO를 위한 메타데이터 최적화 완벽 가이드: 검색 노출부터 소셜 공유까지 (1)	2025.04.11
Next.js 프로젝트 구조의 모든 것: src/pages와 src/app 제대로 알기 (0)	2025.04.09
React에서 브라우저 창 제어하기: 새 창 열기부터 URL 추적까지 (1)	2025.03.28
Next.js에서 cookies-next로 쿠키 관리하기 (2)	2025.03.22