프롭스 드릴링을 좋아해도 된다 — 다만 청구서는 따라온다

훅이 무거울 때 생기는 일에서 「props drilling은 죄가 아니라 비용」이라고 적었더니, 동료가 이렇게 말해 줬다.

전 드릴링 좋아해요. 명확하잖아요. 에러 나면 어디서 터졌는지 보이고. 훅이며 Zustand며 공통으로 관리하는 건 다 싫어요… 사이드 이펙트 나고 찾기 빡세요.

나는 그 말의 반쪽에는 꽤 고개를 끄덕인다. 다만 스스로를 소개하자면, 드릴링 층을 늘리기보다 줄이는 쪽을 택하는 사람이다. 필요하면 위에 연결부(훅·컨테이너)를 두고, 아래는 얇은 프리젠터로 나누는 한이 있어도 말이다.

이 글은 승패를 내자는 게 아니라, 같은 단어를 쓸 때 서로 다른 청구서를 보고 있을 수 있다는 짧은 메모다.

1. 청구서 두 장

선택마다 표가 있다. 틀림이라기보다 교환에 가깝다.

• props로 계속 내리기: 흐름이 보인다. 스택·타입이 따라가기 쉽다. 대신 중간층 시그니처와 변경 반경이 길어지면, 그게 청구서 항목이 된다.
• 훅·스토어·Context로 모으기: 선언은 짧아질 수 있다. 대신 누가 구독하고 누가 바꿨는지를 읽는 비용이 생긴다. 이것도 청구서다.

동료는 props 쪽 청구서를 기꺼이 낸다는 쪽에 가깝고, 내가 전 글에서 말한 비용은 통과만 하는 층이 늘 때 붙는 표에 가깝다. 서로 다른 줄을 보고 있는 것뿐이다.

2. React 문서는 여전히 출발을 props에 둔다

Passing data deeply with Context는 Context 전에 props, 그다음 컴포넌트 추출·children, 그다음 Context 순서를 밟자고 한다. “드릴링이 먼저 나쁘다”가 아니라 순서 이야기다.

나는 여기에 취향만 얹는다. props가 여전히 좋은 구간도 많다. 다만 쓰지도 않는데 이름만 실어 나르는 층이 길어지면, 그건 문서가 말하는 “중간에 추출을 잊었다” 쪽에 가깝고 — 그때는 내가 줄이고 싶은 드릴링이 맞다.

3. 훅이 드릴링을 대신 없애 주진 않는다

커스텀 훅은 같은 state·Effect 덩어리를 재사용할 때 이야기가 많다. 훅을 썼다고 부모·자식 사이 데이터 경로가 항상 사라지지는 않는다.

다만 “다섯 층이 같은 객체를 전달만 한다”를 “한 층에서 묶고, 아래는 잘린 props”로 바꾸는 건 종종 가능하다. 내가 말하는 줄이기는 주로 이쪽이다.

4. 그럼 내가 말한 ‘비용’은 언제 드나

그때 글에서 말한 건 대략 이쪽이다.

• 부모가 레이아웃·게이트가 아니라 데이터 허브가 되어, 자식마다 긴 props 시그니처를 알아야 할 때.
• 중간 레이어가 의미 없이 타입과 필드를 전달만 할 때 — 리네이밍 한 번에 손댈 파일이 줄줄이 늘어날 때.

이건 “props를 없애자”가 아니라 “트리를 다시 그리자”에 가깝다. React가 말하는 추출 / children과 같은 계열이기도 하고, 내가 택하는 연결부 + 프리젠터와도 같은 계열이다.

5. 예전 props 글과도 이어진다

얼마나 많은 Props 가 필요한가?에서 썼듯이, 값과 행동을 한꺼번에 주입하지 말고 계약을 단순하게 유지하자는 쪽은 “드릴링을 늘리자”가 아니라 “명시성은 지키되, 지저분함만 줄이자”에 가깝다.

동료가 원하는 명확함과도 맞닿는다. 부모가 onClick 팩토리까지 넘기면 중간이 금방 지저분해지고, 그 지저분함이 곧 또 다른 형태의 드릴링 비용이 된다.

6. 전역·훅을 싫어하는 말, 나도 이해한다

전역 스토어나 두꺼운 훅은 나쁜 기술이 아니라, 디버깅 예산이 필요한 도구다. 동료가 피하고 싶어 하는 건 이름이 “훅”이라서가 아니라, 구독 관계가 안 보이게 커진 상태에 가깝다고 나는 읽는다.

팀마다 예산 크기가 다르다. “드릴링을 기본으로 두고, 예산 낼 때만 올라간다”는 합의는 꽤 건강하다. 나는 그 위에서 통과용 층만큼은 줄이고 싶다고 말하는 쪽이다.

7. 한 줄로

드릴링을 좋아해도 된다. 다만 청구서는 따라온다. 단어만 맞춰도 논쟁은 반으로 줄어든다.

8. 마지막에만 살짝

드릴링을 사랑하는 분께. 명확함은 대개 맞는데, 그 명확함이 열두 개짜리 시그니처에도 유지되는지는 같이 보면 좋겠다. 그때는 Context가 먼저가 아니라 이름부터 반으로 쪼개는 리팩터가 먼저다.

반대로 “훅은 다 싫다”는 분께는. 네트워크 온라인 여부 하나에 useEffect를 두 군데에 복붙해 두면, 그건 전역이 아니라 중복이다. 그때는 커스텀 훅 한 줄이 오히려 추적을 줄여 줄 수 있다.

즉 싸움의 축은 props vs 훅이 아니라 보이는 계약 vs 숨은 구독에 더 가깝다. 여기까지 맞추면 커피값은 제가 낼게요. 거짓말입니다. 반반입니다.

참고 링크