https://ko.react.dev/learn/passing-data-deeply-with-context

개요

React 컴포넌트를 구조화하다 보면 부모 → 자식 → 손자 컴포넌트로 데이터를 넘기는 경우가 생긴다. 이걸 prop 드릴링(prop drilling)이라고 하는데, 컴포넌트가 많아질수록 유지보수가 어려워진다.
이 문제를 해결하기 위한 도구 중 하나가 바로 React Context API다.

이번 글에서는 prop 드릴링이 어떤 문제를 만들고, 이를 Context를 통해 어떻게 해결할 수 있는지 실제 예제와 함께 정리해본다.

---

prop 드릴링이란?

prop 드릴링은 부모 컴포넌트에서 하위 컴포넌트로 데이터를 넘겨줄 때 직접적으로 쓰지 않는 중간 컴포넌트들도 props를 받아야 하는 상황을 의미함.

const App = () => {
  return <Parent user="Eazy" />
}

const Parent = ({ user }) => {
  return <Child user={user} />
}

const Child = ({ user }) => {
  return <GrandChild user={user} />
}

const GrandChild = ({ user }) => {
  return <div>안녕하세요, {user}님!</div>
}

이렇게 user라는 데이터가 최종적으로는 GrandChild에서만 쓰이는데, 중간 단계의 컴포넌트들도 전부 props를 받아야 함.

규모가 작을 때는 괜찮지만, 앱이 커지고 계층이 깊어지면 코드가 지저분해지고 관리가 어려워진다.

---

Context API란?

React의 Context는 prop 드릴링 없이 컴포넌트 트리 전체에 전역 데이터를 전달할 수 있게 해주는 기능이다.
Redux, Zustand 같은 외부 상태관리 라이브러리 없이도 전역 상태 관리 가능
로그인 정보, 테마, 언어 설정, 다크모드 같은 글로벌 데이터에 적합

Context 기본 사용법

// 1. Context 생성
const UserContext = React.createContext(null)

// 2. 최상단에서 Provider로 감싸기
const App = () => {
  return (
    <UserContext.Provider value="Eazy">
      <Parent />
    </UserContext.Provider>
  )
}

// 3. 필요한 곳에서 useContext로 꺼내쓰기
const GrandChild = () => {
  const user = useContext(UserContext)
  return <div>안녕하세요, {user}님!</div>
}

이렇게 하면 중간 단계인 Parent, Child에서는 더 이상 user를 props로 받을 필요가 없어짐 → props 전파 생략

Context 사용 시 주의점

항목 설명
과도한 남용 모든 데이터를 Context에 넣으면 컴포넌트 재사용성이 떨어짐
렌더링 최적화 Context 값이 바뀌면 하위 전체가 리렌더링되므로, memo나 분리된 Provider가 필요할 수 있음
타입 타입스크립트 사용 시 Context 타입을 명확히 지정해줘야 안정성 확보 가능

언제 Context를 써야 할까?

상황	Context 사용 여부
로그인 정보 공유	✔ 추천
다크모드/테마 상태	✔ 추천
간단한 데이터 전달	❌ props로 충분
페이지 전체 구조에 걸친 설정값	✔ 추천
빈번하게 바뀌는 UI 상태	❌ 외부 상태관리 추천

---

마치며

props는 React의 기본적인 데이터 전달 방식이지만, 컴포넌트 계층이 깊어질수록 prop 드릴링이라는 문제점이 발생한다.
이런 상황에서는 Context API를 적절히 사용하면 구조를 훨씬 깔끔하게 만들 수 있다.
단, Context도 모든 상황에 만능은 아니다. 필요할 때만 신중하게 사용하는 것이 중요하며, 필요에 따라 외부 상태관리 라이브러리로의 확장도 고려해볼 수 있다.