React 18 useDeferredValue 심화: 검색 자동완성에서 디바운싱을 제거하는 이유

부모에서 자식의 자식의 자식까지... 이 고통을 어떻게 끝낼까요?

React로 개발을 하다 보면 이런 상황을 마주하게 됩니다.
최상위 컴포넌트에 있는 데이터를 저 깊숙한 하위 컴포넌트에서 써야 하는데, 중간에 낀 컴포넌트들은 그 데이터를 쓰지도 않으면서 그저 '전달'만 하고 있는 상황 말이죠.
마치 10명이 일렬로 서서 물동이를 나르는 것과 비슷합니다.
우리는 이것을 Props Drilling(프롭스 드릴링)이라고 부릅니다.
오늘은 이 현상이 왜 문제가 되는지, 그리고 이를 우아하게 해결하는 3가지 패턴을 정리해 드립니다.

---

🚧 1. Props Drilling, 왜 나쁜가요?

Props Drilling 자체는 나쁜 패턴이 아닙니다.
React의 기본 데이터 흐름은 단방향(Top-down)이기 때문에 자연스러운 현상입니다.
하지만 깊이가 깊어질수록(Depth가 3~4단계를 넘어갈수록) 개발자를 괴롭히는 치명적인 단점들이 드러납니다.

📉 주요 부작용 3가지

• 코드 추적의 어려움: 데이터의 출처를 찾기 위해 부모 컴포넌트를 계속 거슬러 올라가야 합니다.
  
• 중간 컴포넌트의 오염: 중간에 있는 컴포넌트들은 자신에게 필요 없는 Props 때문에 코드가 지저분해집니다.
  
• 유지보수 비용 증가: Props의 이름을 바꾸거나 타입을 변경하려면, 거쳐가는 모든 컴포넌트 파일을 수정해야 합니다.
  

🖥️ 고통스러운 코드 예시

// App > Header > UserMenu > ProfileImage

function App() {
  const user = { name: 'Gemini' };
  return <Header user={user} />;
}

function Header({ user }) {
  // Header는 user가 필요 없지만 전달해야 함 😩
  return <UserMenu user={user} />;
}
... (계속 반복)

---

🧩 2. 해결책 A: 컴포넌트 합성 (Composition)

많은 분들이 Props Drilling을 만나면 바로 Context API나 Redux를 떠올립니다.
하지만 가장 먼저 고려해야 할 가볍고 강력한 방법은 컴포넌트 합성입니다.
`children` prop을 적극적으로 활용하면 중간 전달자들을 없앨 수 있습니다.

💡 합성의 마법 (Inversion of Control)
데이터를 가진 상위 컴포넌트에서 하위 컴포넌트를 직접 렌더링해서 넘겨주는 방식입니다.
이렇게 되면 중간 컴포넌트는 "무엇이 들어올지 모르는" 구멍(`children`)만 뚫어주면 됩니다.

function App() {
  const user = { name: 'Gemini' };
  // Header에게 내용을 직접 주입!
  return (
    <Header>
      <ProfileImage user={user} />
    </Header>
  );
}

이제 `Header` 컴포넌트는 `user` prop을 알 필요가 없어졌습니다.

---

📡 3. 해결책 B & C: Context API와 전역 상태 관리

컴포넌트 합성만으로 해결하기엔 구조가 너무 복잡하거나, 여러 곳에서 공통으로 쓰는 데이터(테마, 로그인 정보 등)라면 도구를 써야 합니다.

✅ Context API (React 내장)

별도의 라이브러리 설치 없이 사용 가능합니다.
`Provider`로 감싸진 모든 하위 컴포넌트에서 직통 터널을 뚫어 데이터를 꺼내 쓸 수 있습니다.
단, 잦은 상태 변경 시 불필요한 렌더링 이슈가 발생할 수 있어 주의가 필요합니다.

✅ 전역 상태 라이브러리 (Zustand, Redux, Recoil)

프로젝트 규모가 크다면 전문적인 상태 관리 라이브러리가 정답입니다.
최근에는 보일러플레이트 코드가 많은 Redux보다, 직관적인 Zustand가 큰 인기를 끌고 있습니다.

📊 해결책 비교 요약

방법	추천 상황	난이도
Composition	깊이가 2~3단계, 구조 변경 가능 시	⭐ (쉬움)
Context API	테마, 다국어 등 변경이 적은 전역 데이터	⭐⭐ (보통)
Zustand/Redux	복잡한 비즈니스 로직, 빈번한 업데이트	⭐⭐⭐ (어려움)

---

🎓무조건 도구부터 찾지 마세요

Props Drilling이 발생했다고 해서 무조건 Context나 Redux를 도입하는 것은 '모기 잡으려다 초가삼간 태우는 격'이 될 수 있습니다.
먼저 코드를 깔끔하게 정리할 수 있는 컴포넌트 합성을 시도해 보세요.

🚀 오늘의 핵심 요약

• Props Drilling은 데이터 전달을 위해 불필요한 중간 컴포넌트를 거치는 현상입니다.
  
• 이로 인해 코드 유지보수가 어려워지고 추적이 힘들어집니다.
  
• 1단계: `children`을 활용한 합성을 고려하세요.
  
• 2단계: 전역적인 데이터라면 Context API나 Zustand를 사용하세요.
  

여러분의 프로젝트에서 불필요하게 props를 전달하고 있는 '배달부 컴포넌트'는 없는지 지금 바로 확인해 보는 건 어떨까요?