React

[React] Context API를 통한 전역 상태 관리

꽃보다까꿍 2024. 3. 27. 17:55
반응형
React 애플리케이션의 구성 요소 간에 데이터를 전달하는 것은 때때로 복잡할 수 있습니다. 특히, 여러 컴포넌트 레벨을 거쳐야 하는 전역 상태의 경우 더욱 그렇습니다. React의 Context API는 이러한 문제를 해결하기 위해 소개되었습니다. Context를 사용하면, 컴포넌트 트리를 통해 명시적으로 props를 전달하지 않고도 컴포넌트 간에 데이터를 공유할 수 있습니다.

Context 사용의 이점

  • 중첩된 컴포넌트 간의 prop 전달 최소화: Context API를 사용하면, 중간에 위치한 여러 컴포넌트를 거치지 않고도 원하는 데이터를 컴포넌트 트리의 깊은 곳으로 직접 전달할 수 있습니다.
  • 전역 상태 관리: 애플리케이션의 전역 상태를 관리하기 위한 간단하면서도 효과적인 방법을 제공합니다. 사용자 인증 상태, 테마 설정, 언어 설정 등 앱 전체에 걸쳐 공유되어야 하는 정보의 관리가 용이해집니다.

기본 사용 방법

Context API를 사용하는 기본적인 단계는 다음과 같습니다:

  1. Context 생성: React.createContext를 호출하여 새 Context 객체를 생성합니다. 이때, 기본값을 전달할 수 있습니다.
const MyContext = React.createContext(defaultValue);
  1. Context.Provider 사용: 생성된 Context 객체에는 Provider라는 컴포넌트가 포함되어 있습니다. 이 컴포넌트를 사용하여 하위 컴포넌트에 값을 제공합니다. value prop을 통해 공유하고자 하는 데이터를 전달할 수 있습니다.
<MyContext.Provider value={/* 공유하고자 하는 값 */}>
  {/* 여기에 자식 컴포넌트들이 위치합니다. */}
</MyContext.Provider>
  1. Context 소비: Context의 값을 사용하고자 하는 컴포넌트에서는 useContext 훅을 사용하거나, Context.Consumer 컴포넌트를 사용하여 값을 소비할 수 있습니다.
  • useContext 훅 사용 예:
const value = useContext(MyContext);
  • Context.Consumer 컴포넌트 사용 예:
<MyContext.Consumer>
  {value => /* 컨텍스트 값을 기반으로 렌더링 */}
</MyContext.Consumer>

예제: 사용자 테마 설정

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

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

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

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

function Toolbar() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div>
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
        Change Theme
      </button>
      <p>Current Theme: {theme}</p>
    </div>
  );
}

이 예제에서는 ThemeContext를 사용하여 애플리케이션의 테마 상태를 전역적으로 관리하고 있습니다. ThemeProvider 컴포넌트는 모든 자식 컴포넌트에게 테마 관련 정보를 제공합니다. 이를 통해 어떤 레벨의 자식 컴포넌트라도 현재 테마에 접근하고 이를 업데이트할 수 있게 됩니다.

결론

Context API는 React 애플리케이션에서 전역 상태 관리를 위한 강력한 도구입니다. 복잡한 앱에서 prop 드릴링 문제를 해결하고, 전역적으로 필요한 데이터를 효율적으로 관리할 수 있게 해줍니다. 사용법을 익히고 적절히 활용한다면, React 앱의 구조와 유지 관리성을 크게 개선할 수 있습니다.

반응형