[React] Context API로 글로벌 상태 관리 마스터하기! 🌍

React 애플리케이션에서 여러 컴포넌트 간에 데이터를 공유하려면 props를 계속 전달해야 하는 "props drilling" 문제가 발생할 수 있어요. 이를 해결하기 위해 React는 Context API를 제공합니다! 이번 포스팅에서는 Context API를 사용해 글로벌 상태를 관리하는 방법을 배우고, 테마 변경 기능을 구현해볼게요. 🎉

---

반응형

1. Context API란? 🤔

Context API는 React에서 제공하는 내장 기능으로, 계층 구조의 컴포넌트 간에 데이터를 손쉽게 공유할 수 있게 해줍니다. Context는 세 가지 주요 요소로 구성돼요:

1. React.createContext(): Context 객체를 생성합니다.
2. Provider: 데이터를 제공하는 컴포넌트입니다.
3. Consumer: 데이터를 사용하는 컴포넌트입니다. (하지만 Consumer 대신 useContext Hook을 더 많이 사용합니다.)

Context API는 글로벌 상태를 관리하거나, 테마, 언어 설정, 인증 정보 등 애플리케이션 전역에서 필요한 데이터를 공유할 때 유용합니다.

---

2. 예제 – 테마 변경 앱 🌗

Step 1: Context 생성 및 Provider 작성

먼저 테마 데이터를 관리할 Context를 생성하고 Provider를 구현해요.

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

// Context 생성
export const ThemeContext = createContext();

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

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

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

Step 2: Context를 사용하는 컴포넌트 작성

이제 Context 데이터를 사용해 테마를 변경하는 컴포넌트를 만들어봅시다.

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeProvider';

function ThemeSwitcher() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{
      background: theme === 'light' ? '#fff' : '#333',
      color: theme === 'light' ? '#000' : '#fff',
      height: '100vh',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    }}>
      <button onClick={toggleTheme}>
        Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
      </button>
    </div>
  );
}

export default ThemeSwitcher;

Step 3: Provider로 감싸기

애플리케이션 루트 컴포넌트에서 ThemeProvider로 모든 컴포넌트를 감싸줍니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from './ThemeProvider';
import ThemeSwitcher from './ThemeSwitcher';

ReactDOM.render(
  <ThemeProvider>
    <ThemeSwitcher />
  </ThemeProvider>,
  document.getElementById('root')
);

최종 결과

이제 버튼을 클릭하면 테마가 Light Mode와 Dark Mode 사이에서 전환됩니다! 🎉

---

3. Context API의 장단점 ⚖️

장점

1. props drilling 방지: 데이터 전달을 위해 중간 컴포넌트를 수정할 필요가 없습니다.
2. 글로벌 상태 관리 간소화: 작은 애플리케이션에서는 Redux와 같은 라이브러리 없이도 충분히 글로벌 상태를 관리할 수 있습니다.
3. 유연성: 원하는 데이터만 Context에 추가하여 필요한 컴포넌트에만 제공할 수 있습니다.

단점

1. 성능 문제: Context 값이 변경되면 해당 값을 사용하는 모든 컴포넌트가 다시 렌더링됩니다.
2. 복잡한 구조: 대규모 애플리케이션에서는 여러 Context를 다루는 것이 복잡해질 수 있습니다.

성능 최적화를 위해 Context는 꼭 필요한 데이터만 공유하도록 설계하고, React.memo나 분리된 Context를 활용하세요.

---

4. Context API vs Redux 🔄

Context API와 Redux는 둘 다 상태 관리를 위한 도구지만, 사용 목적이 약간 다릅니다:

FeatureContext APIRedux

설치 필요 여부	내장 (설치 불필요)	별도 설치 필요
글로벌 상태 관리	가능	가능
미들웨어 지원	제한적	강력한 미들웨어 지원
복잡도	낮음	높음

작은 프로젝트나 단순한 상태 관리에는 Context API가 적합하고, 복잡한 상태 관리나 미들웨어가 필요한 경우 Redux를 사용하는 것이 좋습니다.

---

5. 마무리 🎯

Context API는 props drilling 문제를 해결하고, 글로벌 데이터를 효율적으로 관리할 수 있는 강력한 도구입니다. 이번 포스팅에서는 테마 변경 앱을 예제로 살펴보았는데요, 이제 여러분의 프로젝트에서 Context API를 활용해보세요! 👩‍💻👨‍💻

더 고급 주제를 원한다면, Context API와 Reducer를 결합해 상태 관리를 강화하는 방법도 탐구해보세요! 🚀