[React] 컨텍스트 API로 상태 관리하기

React 애플리케이션을 개발하다 보면 컴포넌트 간에 상태를 전달해야 하는 경우가 자주 발생합니다. 특히, 중첩된 컴포넌트 구조에서는 props를 통해 상태를 전달하는 것이 관리하기 어려워질 수 있습니다. 이러한 문제를 해결하기 위해 React는 컨텍스트 API를 제공합니다. 이번 글에서는 React의 컨텍스트 API를 사용하여 효율적으로 상태를 관리하는 방법에 대해 알아보겠습니다.

컨텍스트 API란?

컨텍스트 API는 React에서 전역적으로 데이터를 관리할 수 있는 방법을 제공합니다. 이를 통해 계층 구조의 중첩된 컴포넌트들 사이에서 props를 직접 전달하지 않고도 데이터를 공유할 수 있습니다. 주로 테마, 사용자 정보, 인증 상태와 같은 애플리케이션 전역 상태를 관리하는 데 유용합니다.

컨텍스트 API의 주요 구성 요소

컨텍스트 API는 다음과 같은 주요 구성 요소들로 이루어져 있습니다:

1. React.createContext()

createContext 함수는 컨텍스트를 생성하는 데 사용됩니다. 이 함수는 기본값을 인자로 받아 컨텍스트 객체를 반환합니다. 반환된 객체는 Provider와 Consumer를 포함하고 있습니다.

const ThemeContext = React.createContext('light');

2. Context.Provider

Provider는 컨텍스트를 구독하는 컴포넌트들에게 데이터를 전달합니다. Provider는 value prop을 통해 전달하고자 하는 데이터를 설정합니다.

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

3. Context.Consumer

Consumer는 컨텍스트의 데이터를 사용하는 컴포넌트에서 사용됩니다. Consumer는 함수 컴포넌트로서, Provider에서 제공한 데이터를 인자로 받습니다.

<ThemeContext.Consumer>
  {value => <div>The current theme is {value}</div>}
</ThemeContext.Consumer>

4. useContext 훅

React 16.8부터는 useContext 훅을 사용하여 클래스 기반 컴포넌트가 아닌 함수형 컴포넌트에서도 컨텍스트를 손쉽게 사용할 수 있습니다.

import React, { useContext } from 'react';

function App() {
  const theme = useContext(ThemeContext);
  return <div>The current theme is {theme}</div>;
}

5. 컨텍스트의 활용 사례

컨텍스트 API는 여러 가지 상황에서 유용하게 사용할 수 있습니다. 대표적인 사례는 다음과 같습니다:

• 현재 사용자 정보 관리: 로그인한 사용자의 정보를 여러 컴포넌트에서 필요로 할 경우.
• 테마 관리: 다크 모드와 라이트 모드 간 전환을 전역적으로 관리할 경우.
• 다국어 지원: 다양한 언어 설정을 위한 다국어 데이터를 관리할 경우.
• 전역 알림 시스템: 사용자에게 전역적으로 메시지를 표시할 필요가 있을 경우.

예제 코드

다음은 테마를 관리하는 간단한 애플리케이션의 예제 코드입니다:

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

const ThemeContext = createContext();

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

function ThemedButton() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}
    >
      Toggle Theme
    </button>
  );
}

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

export default App;

정리 및 요약

• 컨텍스트 API는 React에서 전역 상태를 관리하기 위한 강력한 도구입니다.
• createContext 함수로 컨텍스트를 생성하고, Provider와 Consumer를 통해 데이터를 전달하고 사용할 수 있습니다.
• useContext 훅을 활용하면 함수형 컴포넌트에서 더 쉽게 컨텍스트를 사용할 수 있습니다.
• 컨텍스트를 사용하면 props 드릴링 없이도 효율적으로 상태를 전달할 수 있습니다.
• 반복적인 props 전달 문제를 해결하고 전역 상태 관리가 필요한 경우 컨텍스트 API를 고려해보세요.