React에서 Context API로 전역 상태 관리하기

React 앱에서 여러 컴포넌트가 공통 상태를 공유해야 할 때가 많습니다. 이때 Context API를 활용하면 별도의 상태 관리 라이브러리 없이도 효율적으로 전역 상태를 관리할 수 있습니다.

1. Context API 기본 개념

Context는 React에서 전역 데이터를 생성하고, 하위 컴포넌트 어디서든 쉽게 접근할 수 있도록 도와줍니다. 의미 있는 이름의 Context를 생성하고, Provider를 통해 값을 전달합니다.

2. 예제 코드로 이해하기

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

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

// 2. Provider 컴포넌트 생성
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prev => (prev === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 3. 커스텀 Hook으로 사용 편의성 제공
export const useTheme = () => useContext(ThemeContext);

// 4. 컴포넌트에서 사용
function ThemedButton() {
  const { theme, toggleTheme } = useTheme();
  return (
    <button onClick={toggleTheme}>
      현재 테마: {theme}
    </button>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  );
}

3. 실무 팁

- 전역 상태가 많아지면 여러 Context로 분리해 관리하는 것이 유지보수에 좋습니다.

- context 값은 필요한 상태와 함수만 포함시켜 렌더링 최적화를 고려하세요.

- 커스텀 Hook을 만들어 사용하는 것이 코드 중복을 줄이고 가독성을 높입니다.

Context API는 간단한 전역 상태 관리에 적합하며, Redux 같은 라이브러리와 비교해 러닝커브가 낮아 빠르게 적용할 수 있다는 장점이 있습니다.