결합도
코드 변경의 영향 범위를 최소화한다. 한 기능 변경이 다른 기능을 깨뜨리면 안 된다.
핵심 패턴
Props Drilling 제거 (조합 패턴)
❌ props가 계층을 통과:
function ItemEditModal({ items, onConfirm, onClose }) {
return (
<Modal onClose={onClose}>
<ItemEditBody items={items} onConfirm={onConfirm} onClose={onClose} />
</Modal>
);
}
function ItemEditBody({ items, onConfirm, onClose }) {
return (
<>
<Button onClick={onClose}>닫기</Button>
<ItemEditList items={items} onConfirm={onConfirm} />
</>
);
}✅ children으로 조합:
function ItemEditModal({ items, onConfirm, onClose }) {
return (
<Modal onClose={onClose}>
<ItemEditBody onClose={onClose}>
<ItemEditList items={items} onConfirm={onConfirm} />
</ItemEditBody>
</Modal>
);
}
function ItemEditBody({ children, onClose }) {
return <><Button onClick={onClose}>닫기</Button>{children}</>;
}책임 분리
❌ 모든 것을 관리하는 Hook:
function usePageState() {
const [query] = useQueryParams({
cardId: NumberParam, dateFrom: DateParam, dateTo: DateParam, statusList: ArrayParam
});
}✅ 단일 책임 Hook:
function useCardIdQueryParam() {
const [cardId, setCardId] = useQueryParam("cardId", NumberParam);
return [cardId ?? undefined, setCardId] as const;
}빠른 참조
| 코드 냄새 | 개선 방법 |
|---|---|
| 3개 이상 계층 통과하는 props | 조합 패턴: children 사용 |
| 5개 이상 반환하는 Hook | 단일 책임 Hook으로 분리 |
| A 수정 시 관련 없는 B 깨짐 | 결합 지점 식별 후 인터페이스 도입 |
| 모든 곳에서 import하는 util | 사용처 가까이로 이동 |
Context가 적절한 경우
진정한 전역 관심사만: 테마, 로케일, 인증 상태, 10개 이상 컴포넌트가 필요한 데이터.
조합 패턴을 피하려고 Context 남용하지 말 것.
예외: 중복이 나은 경우
- 페이지마다 동작이 달라질 여지가 있을 때
- 공통 코드 수정 시 모든 의존 코드 테스트 부담이 클 때
참고: https://frontend-fundamentals.com/code-quality/loosely-coupled/