React에서 Context API 제대로 이해하고 활용하기

 

React는 기본적으로 단방향 데이터 흐름을 따릅니다. 하지만 여러 컴포넌트에서 동일한 데이터를 사용해야 할 경우 Context API를 사용하면 매우 유용합니다.

1. Context API란?

Context는 props를 거치지 않고도 하위 컴포넌트에 데이터를 전달할 수 있게 해주는 기능입니다. 예를 들어, 다국어 설정, 테마, 로그인 정보 등에 자주 사용됩니다.

2. 기본 사용법

// 1. Context 생성
import { createContext } from 'react';

export const ThemeContext = createContext('light');

// 2. Provider로 감싸기
import { ThemeContext } from './ThemeContext';

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 3. Consumer에서 사용
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>현재 테마: {theme}</div>;
}

3. props drilling 문제 해결

부모 컴포넌트에서 하위 컴포넌트까지 props를 계속 전달해야 하는 props drilling 문제를 Context로 깔끔하게 해결할 수 있습니다.

4. 다중 Context 사용하기

두 개 이상의 Context를 사용하는 경우 Provider를 중첩할 수 있습니다.

<ThemeContext.Provider value="dark">
  <UserContext.Provider value={{ name: 'Alice' }}>
    <App />
  </UserContext.Provider>
</ThemeContext.Provider>

5. 주의할 점

• Context의 값이 바뀌면 해당 Context를 사용하는 모든 컴포넌트가 리렌더링됩니다.
• 성능 이슈를 줄이려면 memo나 useMemo와 함께 사용하거나, Context 분리도 고려해야 합니다.

6. 언제 사용해야 할까?

아래와 같은 상황에서 Context API는 좋은 선택이 될 수 있습니다.

• 로그인 유저 정보
• 다크 모드 / 라이트 모드
• 다국어 번역 정보
• 전역 설정 값

7. 마무리

Context API는 전역 데이터를 효율적으로 관리할 수 있는 도구입니다. 다만, 모든 상태를 Context로 관리하려 하면 오히려 성능 저하를 초래할 수 있으므로, 적절한 범위에서 사용하는 것이 중요합니다.