React 공통 컴포넌트 가치 높이는 3대 전략: 확장성 설계·네이티브 활용·접근성 강화

React 개발 시 공통 컴포넌트의 단순 재사용을 넘어 프로젝트 완성도와 유지보수성을 높이는 설계 전략을 소개한다. 핵심은 확장 규칙 설계, 네이티브 요소 활용, 웹 접근성 고려이다.

1. 확장 규칙 설계

• 명확한 역할 정의: 만능 컴포넌트를 지양하고 단일 책임 원칙에 따라 컴포넌트의 경계를 명확히 한다. 필요 시 Base 컴포넌트를 상속하거나 조합하여 새로운 변형 컴포넌트를 만드는 것이 유지보수에 유리하다.
• 인터페이스 정책: variant prop으로 주요 디자인 변형을 처리하고, rest parameters와 인터페이스 상속을 통해 유연성을 확보하되, 과도한 속성 노출로 인한 오버라이딩 위험과 리팩토링 난이도를 고려해 상속 범위를 제한해야 한다.

2. 네이티브 요소 활용

• 숨김 처리: 복잡한 UI(예: 체크박스)는 네이티브 <input>을 opacity: 0 등으로 숨기고 스타일링된 요소와 겹쳐 배치하여, 브라우저 기본 기능(폼 제출, 접근성 등)을 유지하면서 디자인을 구현한다.
• 제어 방식: Controlled와 Uncontrolled 방식의 장단점을 고려하되, 내부적으로는 Controlled로 동작하되 사용자에게는 Uncontrolled처럼 유연하게 사용할 수 있는 하이브리드 방식을 권장한다.
• Ref 전달: react-hook-form 등 외부 라이브러리와의 호환성을 위해 모든 입력 컴포넌트는 forwardRef를 적용해야 한다.

3. 웹 접근성 및 편의성

• ARIA 적용: 탭, 모달 등 복합 컴포넌트에 role, aria-selected, aria-controls 등을 명시하여 스크린 리더가 구조를 이해하도록 돕고, 이를 통해 의미론적인 테스트 코드 작성이 가능해진다.
• 시맨틱 태그 및 인터랙션: 적절한 시맨틱 태그 사용과 ESC 키 닫기, 방향키 이동 등 사용자 편의를 위한 인터랙션을 직접 구현하여 UX를 향상시킨다.