Prop Drilling: 문제가 될 때와 괜찮을 때

환영합니다

프롭 드릴링이란?

// Middle component: receives 'user' only to pass it down
function Layout({ user }) {
  return <Sidebar user={user} />;
}
// Sidebar: receives 'user' only to pass it down
function Sidebar({ user }) {
  return <UserAvatar user={user} />;
}
// UserAvatar: actually uses 'user'
function UserAvatar({ user }) {
  return <img src={user.avatarUrl} />;
}

드릴링이 괜찮은 경우

드릴링이 문제가 되었다는 신호

컴포넌트 조합으로 리팩터링하기

// Instead of drilling 'user' through Layout → Sidebar → UserAvatar,
// render UserAvatar at the top level and pass it as a slot:
function App() {
  return <Layout sidebar={<UserAvatar user={user} />} />;
}

컴포넌트 조합으로 결합도 낮추기

컨텍스트를 사용하는 경우

상태 라이브러리를 사용하는 경우

역방향 데이터 흐름

판단 흐름

빠른 확인

복습

다음 학습