더 가치 있는 공통 컴포넌트 만들기
프론트엔드
더 가치 있는 공통 컴포넌트 만들기
두줄요약
공통 컴포넌트를 단순히 재사용용으로만 보지 않고 역할과 확장 규칙을 함께 설계하는 방법을 다뤘습니다. 또한 네이티브 요소, controlled/uncontrolled, forwardRef, 접근성까지 고려해 실용성을 높이는 방향을 제안했습니다.
핵심 내용
- React/TypeScript 공통 컴포넌트를 더 가치 있게 만들기 위한 설계 고민 정리
- 컴포넌트 역할 경계 명확화, 인터페이스 확장 정책, 네이티브 요소 활용, 웹 접근성 고려를 중심으로 설명
- 무분별한 범용화보다 책임을 유지한 확장과 실사용성, 유지보수성을 함께 보는 관점 강조
- controlled/uncontrolled, forwardRef, 시맨틱 태그 같은 구현 포인트를 공통 컴포넌트 설계에 연결
적용해볼 점
- 역할이 다른 요구는 단일 컴포넌트에 억지로 넣지 않고 분리된 공통 컴포넌트로 구성
- variant, rest props, forwardRef, 숨은 네이티브 요소 활용 여부를 상황에 맞게 선택
- 접근성과 사용성, 테스트와 SEO까지 포함한 실용 기준으로 공통 컴포넌트 점검