React Context API로 간단하게 전역 상태 관리하기

🔗 Context API란 무엇인가?

React에서 데이터를 컴포넌트 간에 전달하려면 보통 props를 사용합니다.
하지만 컴포넌트의 깊이가 깊어질수록 props를 단계별로 전달해야 하는 불편함이 생기죠.
이를 흔히 prop drilling이라고 부릅니다.
Context API는 이런 문제를 해결하기 위해 도입된 기능으로, 중간 단계 없이 필요한 컴포넌트가 곧바로 데이터를 받아 사용할 수 있게 해줍니다.

Context API는 전역적인 상태를 만들 수 있는 기본 내장 도구입니다.
예를 들어 로그인한 사용자의 정보, 현재 UI의 테마(밝음/어두움), 다국어 지원과 같은 상태는 애플리케이션 전반에서 공유될 필요가 있습니다.
이럴 때 Context를 사용하면 별도의 외부 라이브러리 없이 간단하게 구현할 수 있습니다.

📌 왜 Context API가 필요한가?

일반적인 상태 관리 방식에서는 상위 컴포넌트가 상태를 가지고, 하위 컴포넌트에 props를 전달합니다.
하지만 구조가 복잡해지면 불필요하게 많은 컴포넌트가 props를 전달하는 역할만 하게 되고, 코드의 유지보수가 힘들어집니다.
Context API를 사용하면 이런 불필요한 전달 과정을 생략할 수 있어 개발 생산성이 크게 향상됩니다.

🛠️ 기본 사용법과 주요 구성 요소

Context API를 활용하기 위해서는 크게 세 가지 개념을 알아야 합니다.
바로 React.createContext, Provider, Consumer 입니다.
이들은 Context를 생성하고, 값을 전달하며, 필요한 곳에서 값을 가져오는 역할을 각각 담당합니다.

📌 Context 생성하기

먼저 React.createContext()를 호출해 새로운 Context를 생성합니다.
이때 기본값을 설정할 수도 있습니다.

// Context 생성
const ThemeContext = React.createContext('light');

📌 Provider로 값 전달하기

Provider는 Context를 구독하는 컴포넌트들에게 값을 전달합니다.
트리 전체에서 공유할 상태를 설정하는 역할을 하죠.

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

📌 Consumer 또는 useContext로 값 사용하기

Consumer를 사용하거나, 함수형 컴포넌트에서는 useContext 훅을 사용해 값을 쉽게 불러올 수 있습니다.

const theme = useContext(ThemeContext);
console.log(theme); // "dark"

⚙️ Redux와 비교했을 때의 차이점

Context API와 Redux는 모두 전역 상태 관리를 위한 도구이지만, 접근 방식과 목적에서 차이가 있습니다.
간단히 말해 Context API는 React에서 기본 제공되는 기능으로 가볍고 단순한 전역 상태 공유에 적합합니다.
반면 Redux는 복잡한 애플리케이션에서 상태를 엄격하게 관리하고 예측 가능하게 유지하기 위한 강력한 도구입니다.

📌 Context API의 장점

• ✅React 내장 기능이라 별도의 라이브러리가 필요 없음
• ✅설정이 간단하고 코드가 가벼움
• ✅소규모 프로젝트나 단순한 전역 상태 관리에 최적

📌 Redux의 장점

Redux는 상태 변화를 예측 가능하게 만들고, 디버깅이나 테스트가 훨씬 쉬워집니다.
특히 대규모 애플리케이션에서 상태가 복잡하게 얽혀 있을 때 큰 힘을 발휘합니다.

💬 즉, Context API는 간단한 상황에, Redux는 복잡하고 체계적인 관리가 필요한 상황에 사용하는 것이 이상적입니다.

🔌 실전 예제 코드로 살펴보기

Context API를 어떻게 실제 프로젝트에서 사용하는지 간단한 예제를 통해 살펴보겠습니다.
예제는 테마(밝음/어두움)를 전역적으로 관리하는 상황을 가정합니다.

📌 Context 생성 및 Provider 설정

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

export const ThemeContext = createContext();

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

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

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

위 코드에서는 ThemeContext를 생성하고, Provider를 통해 하위 컴포넌트들이 사용할 수 있도록 전역 상태를 제공합니다.

📌 useContext로 값 불러오기

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

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

  return (
    <button onClick={toggleTheme}>
      현재 테마: {theme}
    </button>
  );
}

이제 ThemeButton 컴포넌트는 전역적으로 공유된 상태인 theme과 toggleTheme 함수를 바로 사용할 수 있습니다.
props를 일일이 내려주지 않아도 되므로 코드가 깔끔해지고 유지보수성이 높아집니다.

💡 활용 시 주의사항과 성능 최적화

Context API는 편리한 도구이지만, 무분별하게 사용하면 성능 저하와 코드 복잡도를 유발할 수 있습니다.
따라서 언제 Context를 쓰고, 어떤 경우에는 다른 방법을 고려해야 하는지 분명히 이해하는 것이 중요합니다.

📌 주의해야 할 상황

• ⚠️모든 상태를 Context에 넣는 것은 바람직하지 않음
• ⚠️값이 자주 변경되는 상태는 불필요한 렌더링을 유발
• ⚠️중첩된 여러 Context는 관리가 어려워질 수 있음

📌 성능 최적화 팁

Context API를 효율적으로 활용하려면 성능 최적화를 고려해야 합니다.
아래 방법들을 참고하면 불필요한 렌더링을 줄이고 쾌적한 사용자 경험을 유지할 수 있습니다.

• 🛠️Context 분리 : 서로 관련 없는 상태는 별도의 Context로 분리
• ⚙️메모이제이션 : useMemo, useCallback으로 값과 함수 최적화
• 🔌Selector 패턴 : 필요한 데이터만 구독하도록 구조 설계

❓ 자주 묻는 질문 (FAQ)