React의 Context API로 전역 상태 관리하기 – props drilling 없이 데이터 전달

 

React 애플리케이션이 커지면서 컴포넌트 간에 데이터를 전달하기 어려워지는 경우가 많습니다. 이때 Context API를 사용하면 전역 데이터를 간단하게 관리할 수 있습니다.

1. props drilling 문제란?

상위 컴포넌트의 데이터를 하위로 계속 전달해야 하는 상황을 props drilling이라고 합니다. 예:

<App>
  <Parent user={user}>
    <Child user={user}>
      <GrandChild user={user} />
    </Child>
  </Parent>
</App>

이런 구조는 관리가 어렵고, 중간 컴포넌트는 실제로 데이터를 사용하지 않더라도 전달해야 합니다.

2. Context API 기본 사용법

1) Context 생성

import { createContext } from 'react';

export const UserContext = createContext(null);

2) Provider로 감싸기

import { UserContext } from './UserContext';

function App() {
  const user = { name: '홍길동', age: 30 };

  return (
    <UserContext.Provider value={user}>
      <Profile />
    </UserContext.Provider>
  );
}

3) 하위 컴포넌트에서 사용

import { useContext } from 'react';
import { UserContext } from './UserContext';

function Profile() {
  const user = useContext(UserContext);

  return <div>안녕하세요, {user.name}님!</div>;
}

3. 전역 상태 관리로 활용하기

Context는 사용자 정보, 테마 설정, 언어 설정 등 전역에서 사용하는 값을 관리할 때 유용합니다.

4. 주의할 점

• 자주 변경되는 값(state)을 넣으면 성능 이슈가 생길 수 있습니다
• Context는 전역 상태의 복잡도가 클 경우 Redux 또는 Recoil과 같은 상태 관리 라이브러리가 더 적합할 수 있습니다

5. 마무리

Context API는 props 전달을 간소화하고 전역 상태를 보다 깔끔하게 관리할 수 있는 강력한 도구입니다. 작은 규모의 프로젝트나 사용자 인증, 테마 등 공통 데이터에 특히 효과적입니다.