---
name: fe-coupling
description: 수정 영향 범위를 좁히는 기준(Toss Frontend Fundamentals 결합도). 훅·컴포넌트의 책임을 나눌 때, 비슷한 코드를 공통 훅·컴포넌트로 묶을지 정할 때, props가 여러 단계를 거쳐 전달될 때 사용
---

# 결합도 (Coupling)

코드를 수정했을 때 **영향범위가 적어서**, 변경에 따른 범위를 **예측할 수 있는** 코드가 수정하기 쉬운 코드입니다. 한 곳에서 다루는 맥락이 많아지면 코드를 이해하고 수정하기 어려워집니다.

## 빠른 참조

| 항목 | 이런 코드면 의심 | 개선 방향 |
|---|---|---|
| 1. 책임을 하나씩 관리하기 | 한 훅이 5개 넘는 상태·쿼리 파라미터를 관리한다. 새 기능이 무조건 기존 훅에 추가된다 | 책임 하나만 맡는 작은 훅으로 나눈다 |
| 2. 중복 코드 허용하기 | 페이지마다 달라질 수 있는 동작(로깅 값, 화면 종료 여부)을 공통 훅 하나로 묶었다 | 각 페이지에 두고, 공통화 조건을 모두 만족할 때만 추출한다 |
| 3. Props Drilling 지우기 | 중간 컴포넌트가 쓰지 않는 props를 전달만 한다. prop 이름을 바꾸면 3곳 넘게 고쳐야 한다 | children으로 조합해 단계를 줄이고, Context는 최후 수단으로 |

## 판단 기준

- **중복 허용**: 페이지마다 동작이 달라질 여지가 있거나, 기능이 정말 같은지 검증되지 않았거나, 아직 2개 정도일 때.
- **공통화**: 로깅 값·동작·UI가 모두 같고 **앞으로도 같을 예정**일 때만. 3개 이상 완전히 같고, 함께 안 고치면 버그가 나는 경우가 기준이다. 동료와 동작을 확인한 뒤 정한다.
- **Props Drilling 대응 순서**: 먼저 props가 컴포넌트의 역할과 의도를 표현하는지 본다(그렇다면 drilling이 아닐 수 있다). 그다음 children 조합, 마지막으로 Context.

## Red Flags (발견 즉시 Critical)

- **God Hooks (5개 이상 관심사)**: `usePageState`처럼 여러 쿼리 파라미터/상태를 한꺼번에 관리 — 수정 시 영향 범위가 급격히 확장
- **Props Drilling 3단계 이상**: 중간 컴포넌트가 사용하지 않는 props를 전달 — prop 이름 변경 시 모든 참조 컴포넌트 수정 필요
- **과도한 공통화**: 페이지마다 동작이 다를 수 있는데 하나의 함수로 통합 — Hook 수정 시 모든 의존 페이지 테스트 필요
- **수정 영향 범위 예측 불가**: 한 곳을 수정하면 예상 외의 곳에서 깨지는 구조

## 다른 원칙과 부딪히는 지점

결합도 개선이 다른 원칙과 상충할 수 있습니다:

- **결합도 vs 응집도**: 중복 코드를 허용하면 영향범위가 줄어 결합도는 낮아지지만, 한쪽을 수정했을 때 다른 쪽을 실수로 수정하지 못할 수 있어 응집도가 떨어짐
- **결합도 vs DRY**: 중복을 허용하는 것이 결합도를 낮추지만, 3개 이상 완전 동일 로직은 추상화가 유리

| 상황                        | 우선 가치 | 이유                 |
| --------------------------- | --------- | -------------------- |
| 요구사항이 다를 수 있음     | 결합도    | 독립적 변경 가능     |
| 함께 수정 안 하면 버그 발생 | 응집도    | 안전성 확보          |
| 2개 정도의 유사 코드        | 결합도    | 아직 추상화하기 이름 |
| 3개 이상 완전 동일 로직     | 응집도    | 유지보수 비용        |

원칙끼리 부딪히면 `fe-tradeoffs` 스킬의 판단 기준을 따른다.

## 예시 코드

항목별 상세 설명, Bad/Good 코드, 확인 질문은 [references/examples.md](references/examples.md)에 있다. 개선안을 코드로 제시할 때 참고한다.

## 출처

- [책임을 하나씩 관리하기](https://frontend-fundamentals.com/code-quality/code/examples/use-page-state-coupling.html)
- [중복 코드 허용하기](https://frontend-fundamentals.com/code-quality/code/examples/use-bottom-sheet.html)
- [Props Drilling 지우기](https://frontend-fundamentals.com/code-quality/code/examples/item-edit-modal.html)