Props Drilling 문제란?

 

Props Drilling 문제란?

React에서 부모 컴포넌트의 상태(state)를 자식 → 손자 →  증손자 컴포넌트로 계속 props를 통해 전달해야 하는 문제를 Props Drilling이라고 한다.

즉, 상태를 직접 사용하지 않은 중간 컴포넌트도 불필요하게 props를 전달해야 하는 비효율적인 상황이 발생한다.

---

Props Drilling 문제 예제

문제 상황 : 중간 컴포넌트까지 필요 없이 props를 전달 해야 함

import React, { useState } from "react";

// 부모 컴포넌트 (최상단에서 상태를 관리)
const Parent = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h2>부모 컴포넌트</h2>
            <Intermediate count={count} setCount={setCount} />
        </div>
    );
};

// 중간 컴포넌트 (여기선 count를 직접 사용하지 않음)
const Intermediate = ({ count, setCount }) => {
    return <Child count={count} setCount={setCount} />;
};

// 자식 컴포넌트 (실제로 count를 사용하는 곳)
const Child = ({ count, setCount }) => {
    return (
        <div>
            <h3>현재 카운트: {count}</h3>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    );
};

export default Parent;

 

이 코드의 문제점

• Intermediate 컴포넌트는 count와 setCount를 사용하지 않지만 props를 전달해야 한다.
• 컴포넌트가 많아질 수록 코드가 복잡해지고 유지보수가 어려워진다.
• 구조가 바뀌면 모든 중간 컴포넌트의 props도 수정해야 한다.

---

 

Props Drilling 해결 방법 (Context API 사용)

Context API를 사용하면 중간 컴포넌트 없이 필요한 곳에서 직접 상태를 가져올 수 있다.

import React, { createContext, useContext, useState } from "react";

// 1️⃣ Context 생성(전역 상택 저장소 역할)
const CountContext = createContext();

// 2️⃣ Provider 컴포넌트 생성 (상태를 하위 컴포넌트에 count와 setCount를 전역으로 제공)
const CountProvider = ({ children }) => {
    const [count, setCount] = useState(0);
    return (
        <CountContext.Provider value={{ count, setCount }}>
            {children}//CountProvider 안에 감싸진 모든 컴포넌트 의미
        </CountContext.Provider>
    );
};

// 3️⃣ 상태를 직접 사용하는 컴포넌트(useContext():Context에 저장된 상태를 직접 가져와 사용)
const Child = () => {
    const { count, setCount } = useContext(CountContext);
    return (
        <div>
            <h3>현재 카운트: {count}</h3>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    );
};

// 4️⃣ 앱에서 Provider 감싸기
const App = () => (
    <CountProvider>//CountProvider가 Child 컴포넌트를 감싸므로, Child는 count와 setCount를 사용 가능
        <Child /> // Child 컴포넌트가 children으로 전달됨
    </CountProvider>
    //Child가 직접 countprovider에서 count상태를 가져오므로 props Drilling이 사라짐
);

export default App;

• 중간 컴포넌트(Intermediate)를 거치지 않고 바로 상태에 접근 가능
• 상태를 Context에서 직접 가져오므로 유지보수 쉬움
• Props 전달이 필요 없어 코드가 더 깔끔해짐

---

Props Drilling을 해결하는 방법

1. Context API : 작은 프로젝트에서 사용하기 적절
2. Redux/Zustand 같은 상태 관리 라이브러리 : 대규모 프로젝트에서 사용 추천
3. React Query, Recoil 같은 외부 상태 관리 도구 : API 요청이 많을 때 추천