TIL - 드롭다운 구현 select에서 커스텀 button+ul로의 전환

초기 설계 의도:

• 목표: 텍스트 입력과 드롭다운 선택을 모두 지원하는 범용 Input 컴포넌트 생성
• 접근 방식: InputText와 InputSelect를 하나의 Input 컴포넌트로 통합
  
  

type InputProps = (InputTextProps | InputSelectProps) & { isDropdown?: boolean };

초기 구현의 문제점:

• InputSelect에서 HTML <select> 요소 사용 시도
• 타입 정의
  
  

type InputSelectProps = BaseInputProps & ComponentProps<'select'> & {
  dropdownOptions: string[];
};

발생한 문제:

• 스타일링 제한: <select>의 드롭다운 모양 커스터마이징의 어려움
• 타입 불일치: select 속성과 필요한 커스텀 기능 간 충돌
• 이벤트 처리의 복잡성: select의 기본 이벤트와 원하는 동작 간 차이

해결 방안:

• <select> 대신 <button>과 <ul>/<li> 조합으로 커스텀 드롭다운 구현
• InputSelectProps 재정의
  
  

type InputSelectProps = Omit<BaseInputProps & ComponentProps<'button'>, 'onChange'> & {
  dropdownOptions: string[];
  onChange?: (event: { target: { value: string } }) => void;
};

 

새로운 구현의 이점:

• 일관된 디자인: InputText와 InputSelect의 외관 통일성 확보
• 향상된 사용자 경험: 커스텀 스타일링과 동작 구현 가능
• 타입 안정성: 버튼과 드롭다운에 특화된 속성 및 이벤트 처리

오늘 input 공용 태그를 select와 text 입력 하는 것을 같이 시도하다가 범용성과 특수성, 타입 안정성과 유연성 사이의 균형을 맞추는 방법을 배웠습니다. 초기 설계의 의도를 유지하면서도 각 사용 케이스에 최적화된 솔루션을 개발하는 것의 중요성을 깨달았습니다.