How to Build Reusable UI Components

Context

프론트엔드 프로젝트가 진행되면서 PrimaryButton, SecondaryButton, BigButton, BlueButton, SubmitButton 등 유사한 컴포넌트가 반복 생성되어 코드베이스가 복잡해진다. 개발자들은 재사용성을 무시하거나 반대로 과도하게 엔지니어링하는 두 극단 사이에서 균형을 잡기 어렵다.

Technical Solution

• Props 도입으로 하드코딩된 값 제거: children, onClick 등 동적 데이터를 함수 인자로 전달받아 동일 컴포넌트에서 다양한 라벨과 동작 구현
• Variants 패턴 적용: variant="primary" | "secondary" | "danger" 같은 단일 prop으로 스타일 객체 매핑하여 다중 파일 대신 하나의 Button 컴포넌트에서 관리
• Single Responsibility Principle 적용: 데이터 페칭, 상태 관리, 변환, 렌더링을 분리하여 UserCard(UI 전용) + useUser(로직 훅) + UserModal(모달 동작) 구조로 재구성
• TypeScript 타입 안전성: PropTypes 또는 TypeScript를 통한 타입 체킹으로 개발 단계에서 오류 조기 감지
• ...rest 스프레드 연산자로 확장성 확보: 예상하지 못한 HTML 속성(data-, aria- 등)을 하위 요소로 전파하여 접근성 기본 구현

Impact

아티클에 정량적 성능 수치 제시 없음.

Key Takeaway

재사용 가능한 컴포넌트는 처음부터 완벽하게 설계하지 말고, 단순하게 구축한 후 실제 반복 패턴이 발생할 때 리팩토링해야 한다. Props와 Variants로 유연성을 확보하고 Single Responsibility로 유지보수성을 높이는 것이 코드 복잡도를 낮추는 핵심이다.