Udemy React 강의 164번 정리
이번 강의에서는 prop drilling을 줄이는 한 가지 방법, 바로 컴포넌트 합성(Component Composition)에 대해 배웠다.
핵심은 상태를 어디에 두느냐보다 함수를 누구에게까지 전달해야 하느냐에 있다.
1. Prop Drilling이 생기는 이유
기존 구조
App
└─ Shop
└─ Product- handleAddItemToCart 함수는 App에 있음
- 버튼 클릭은 Product에서 발생
- 그래서 App → Shop → Product로 함수가 계속 내려감
<App>
<Shop onAddItemToCart={handleAddItemToCart}>
<Product onAddToCart={handleAddItemToCart} />
</Shop>
</App>문제점
- Shop 컴포넌트는 이 함수를 사용하지 않음
- 그럼에도 불구하고 "전달"만 하기 위해 props를 받음
- 이런 구조가 반복되면 컴포넌트가 점점 지저분해짐
이게 prop drilling
2. 핵심 질문 하나로 정리하기
이 컴포넌트 안에서 이 함수가 실제로 실행되는가?
- YES → 함수 전달 필요
- NO → 함수 전달 불필요 (prop drilling 가능성)
3. 해결 방법 1 : Component Composition
접근 방식
- Shop이 제품을 직접 렌더링하지 않게 한다
- Shop은 단순히 "감싸는 역할"만 하도록 변경
- 실제 로직은 App에서 처리
4. 변경 전 그리고 변경 후 비교
변경 전 : Shop이 모든 걸 관리
function Shop({ onAddItemToCart }) {
return (
<ul>
{products.map(product => (
<Product
key={product.id}
onAddToCart={onAddItemToCart}
/>
))}
</ul>
);
}- 제품 렌더링
- 함수 전달
- 중간 관리자 역할
변경 후 : Shop은 wrapper 역할만!
function Shop({ children }) {
return <ul>{children}</ul>;
}App에서 직접 Product 렌더링:
<Shop>
{products.map(product => (
<Product
key={product.id}
onAddToCart={handleAddItemToCart}
/>
))}
</Shop>5. 무엇이 달라졌을까?
함수 전달 구조 변화
App → Product- Product는 버튼 클릭 시 함수를 직접 실행
- Shop은 children만 감쌈 → 함수 몰라도 됨
즉, 함수가 필요한 컴포넌트에게만 전달됨.
하지만 이 방법에도 한계가 있다.
모든 로직을 App으로 끌어올리면 App 컴포넌트가 점점 비대해짐.
즉, 모든 prop drilling을 component composition으로 해결할 수는 없음.
그래서 다음 강의에서는 Context API / 전역 상태 관리를 배우게 될 예정.
