피드로 돌아가기
Dev.toFrontend
원문 읽기
Universal Component의 Props 폭발 방지를 통한 유지보수성 확보
The Hidden Cost of ‘Reusable Components’ in Vue
AI 요약
Context
DRY 원칙과 재사용성에 집착한 과도한 추상화로 인해 단일 컴포넌트가 모든 요구사항을 처리하는 Universal Component로 변질되는 문제 발생. 요구사항 추가에 따른 무분별한 Props 확장이 코드 복잡도를 증가시키며 디버깅 및 유지보수 효율을 저하시키는 한계 노출.
Technical Solution
- 단일 컴포넌트 내 조건부 렌더링 로직 제거를 통한 복잡도 제어
- 기능적 유사성보다 도메인 목적에 따른 FloatingButton, NotificationButton 등 컴포넌트 분리 설계
- 재사용성 확보 전 최소 2회 이상의 반복 패턴 확인 후 추상화 적용하는 지연 전략 채택
- 컴포넌트당 Props 개수를 5~6개로 제한하여 단일 책임 원칙(Single Responsibility Principle) 준수
- 기본 기능을 담은 Base 컴포넌트와 특화 기능을 담은 Wrapper 컴포넌트의 계층적 구조 설계
실천 포인트
- 컴포넌트 Props가 6개를 초과하는지 확인하여 분리 필요성 검토 - 새로운 요구사항 발생 시 기존 재사용 컴포넌트 수정 대신 신규 컴포넌트 생성 고려 - 단순 UI 중복 제거보다 변경 영향 범위(Blast Radius) 최소화에 우선순위 설정 - 추상화 단계 도입 전 최소 2번의 구체적 사례가 확보되었는지 검증