프론트엔드
더 가치 있는 공통 컴포넌트 만들기
두줄요약
React·TypeScript 공통 컴포넌트의 책임 경계와 확장 인터페이스 설계를 다뤘습니다. 네이티브 요소와 접근성을 활용해 재사용성·완성도를 높이는 방법을 소개합니다.
구조와 흐름
- 공통 컴포넌트의 책임 경계 설정과 만능 컴포넌트 지양
className,variant, DOM 속성 인터페이스 상속을 통한 단계적 확장- 네이티브 form 요소, controlled·uncontrolled 방식,
forwardRef활용
트레이드오프
- DOM attribute 전체 상속에 따른 확장성 확보와 prop 이해·리팩토링 난이도 증가
- controlled 방식의 상태 추적 편의와 state lifting·불필요한 리렌더링 비용
- 컴포넌트 내부 controlled 처리와 외부 uncontrolled 사용 경험의 혼합 방식
주의할 점
- rest props 추가 전 컴포넌트의 역할과 기존 prop 정책 훼손 여부 검토
- 공통 탭 재사용 시
id중복 방지 - 네이티브 요소로 제공되지 않는 키보드·포커스 인터랙션의 별도 구현 필요
적용해볼 점
- 숨긴 네이티브 input으로 디자인 커스터마이징과 기본 접근성·동작 결합
- 시맨틱 태그와 ARIA role·attribute로 스크린 리더, 테스트, SEO 지원
- 유명 UI 라이브러리 소스 분석을 통한 공통 컴포넌트 설계 의도 학습
