Ch.22 React 심화 — 상태 관리 패턴

Props Drilling 문제

Props Drilling의 개념과 문제점을 이해한다Props Drilling이 문제가 되는 기준을 안다해결책의 종류를 개괄적으로 파악한다

컴포넌트 5단계를 거쳐 데이터를 전달?

로그인한 유저 정보를 Header, Sidebar, Content, Footer에서 모두 필요로 합니다. App → Layout → Main → Content → UserInfo로 props를 계속 내려보내야 합니다.

중간 컴포넌트는 사용도 안 하면서 props를 전달만 해야 하나?

Props Drilling — 깊은 계층에 데이터를 전달하기 위해 중간 컴포넌트를 관통하는 패턴입니다.

article

핵심 내용

부모 → 자식 → 손자 props를 관통시키는 패턴입니다

// 😩 Props Drilling 예시
function App() {
  const [user, setUser] = useState({ name: "Kim" });
  return <Layout user={user} />;  // 1단계
}

function Layout({ user }) {
  // user를 사용하지 않지만 전달만 함
  return <Main user={user} />;     // 2단계
}

function Main({ user }) {
  // 여기서도 사용 안 함
  return <Content user={user} />;  // 3단계
}

function Content({ user }) {
  // 드디어 사용!
  return <p>{user.name}님 환영합니다</p>;
}

Layout, Main은 user를 쓰지도 않으면서 전달만 합니다. 이것이 Props Drilling의 핵심 문제입니다.

2~3단계는 OK 5단계 이상이면 대안을 찾으세요

Props Drilling을 해결하는 세 가지 방법이 있습니다

// 컴포넌트 합성 — 구조를 바꿔 Drilling 회피
function App() {
  const [user] = useState({ name: "Kim" });

  // Content를 App에서 직접 만들어서 넘김
  return (
    <Layout>
      <Main>
        <Content user={user} />
      </Main>
    </Layout>
  );
}

// Layout, Main은 children만 렌더링
function Layout({ children }) {
  return <div className="layout">{children}</div>;
}

바이브 코더 팁 AI에게 코드를 생성시킬 때 "Context 또는 Zustand로 상태 관리해줘"라고 말하면 Props Drilling 없이 깔끔한 코드를 받을 수 있습니다.

Props Drilling은 항상 나쁜 패턴이므로 무조건 피해야 한다

Props Drilling이 문제가 되는 핵심 이유는?

key

핵심 용어

🎯

Context API

React 내장. 전역 데이터 공유. 간단한 경우에 적합

🐻

Zustand

가볍고 직관적인 상태 관리 라이브러리. 보일러플레이트 최소

🧩

컴포넌트 합성

children으로 직접 전달. 구조 자체를 바꾸는 방법

compare_arrows

비교 정리

항목괜찮은 경우문제가 되는 경우
깊이2~3단계5단계 이상
사용 범위특정 서브트리에서만 필요앱 전체에서 필요 (테마, 유저 정보)
유지보수컴포넌트 수가 적음중간 컴포넌트 수정 시 연쇄 변경
edit_note

정리 노트

Props Drilling 핵심 정리

Props Drilling

Props Drilling
상위 컴포넌트의 데이터를 하위로 전달할 때 중간 컴포넌트를 모두 거쳐야 하는 문제
문제점
중간 컴포넌트가 사용하지도 않는 props를 전달만 해야 함
해결 방법
Context API, Zustand 등 전역 상태 관리 도구 사용
★

컴포넌트 3단계 이상 props를 내려보낸다면 전역 상태 관리를 고려하세요.

image

시각 자료

다이어그램: wd-scene-state-mgmt

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작