React Context API 사용 전략

1. Context API란?

• React에서 props를 여러 단계에 걸쳐 전달하지 않고도 데이터를 공유할 수 있는 방법입니다.
• 전역 상태를 간단하게 관리할 때 사용합니다.

2. 언제 Context API를 써야 할까?

• 전역으로 필요한 데이터가 있을 때 (예: 사용자 정보, 테마, 다국어 설정)
• 상태 관리 라이브러리(Redux, Recoil 등)가 너무 무거울 때
• 간단한 전역 상태가 필요할 때

3. 사용법 기본

 

Context 만들기

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

export const ThemeContext = createContext();

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

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

 

 

Context 사용하기

 

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

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

  return (
    <button
      style={{ backgroundColor: theme === 'light' ? '#eee' : '#333', color: theme === 'light' ? '#000' : '#fff' }}
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
    >
      Toggle Theme
    </button>
  );
}

 

 

좋은 Context API 사용 전략

 

 

• Context 분리: 여러 상태를 하나의 Context에 모두 넣지 말고, 기능별로 나눠서 관리하면 리렌더링 최적화에 도움이 됩니다.
• 불필요한 리렌더 방지: Context 값이 변경되면 그 Context를 구독하는 모든 컴포넌트가 리렌더 됩니다. 그래서 Context에는 자주 변경되지 않는 값을 넣는 것이 좋습니다.
• 커스텀 훅 활용: Context를 더 쉽게 사용하기 위해 커스텀 훅을 만들어서 재사용성을 높입니다.

 

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

export function useTheme() {
  return useContext(ThemeContext);
}

 

Context API의 한계

 

• 복잡한 상태 로직이나 비동기 작업이 많을 때는 Redux, Recoil 같은 전문 상태관리 라이브러리를 사용하는 편이 낫습니다.
• Context 값이 자주 변경되면 성능 문제가 발생할 수 있습니다.