select 와 option 의 한계
- 디자인의 한계 : 프로젝트를 진행하면서
<select>와<option>을 사용해 목록을 보여주도록 했는데, 내가 원하는대로 CSS 적용이 안되는 문제가 있었다.
찾아보니, option 태그는 브라우저가 네이티브한 디자인을 적용하기 때문에 사용자 정의 스타일링이 제한되어 있어서 일부 스타일 적용이 안될 수도 있다고 한다.
- 브라우저 간의 일관성 부족 :
<select>와<option>의 스타일은 운영 체제와 브라우저에 따라 다르게 나타난다는 문제점도 있었다. 이로 인해 동일한 웹 페이지를 여러 브라우저에서 확인할 때 일관된 디자인을 유지하는 것이 어려웠고 특히, 브라우저 간의 차이로 사용자 경험이 일관되지 않을 수 있다는 점이 마음에 걸렸다.
-
개선 방향 : 따라서 간단한 셀렉트 박스를 구현할때는 select 와 option 태그가 편리할 수 있지만, 디자인을 변경하거나 브라우저간의 일관성을 확보하는데 적합하지 않을 수도 있다는 점을 알게 되었다.
이러한 제한으로 인해 원하는 디자인의 셀렉트 박스를 만들기 위해서는
<select>와<option>태그를 사용하는 것보다 자체 구현이나 다른 라이브러리를 사용하는 것을 고려해야했다.
dropDown 만들기
위와 같은 이유로 <select> 와 <option> 태그를 사용하지 않고 직접 셀렉트 박스를 구현하기로 했다. DropDown 이라는 컴포넌트를 따로 생성했다.
-
<ul>과<li>태그를 사용해 리스트 형태의 UI 를 구현했다. -
useState 를 사용해서 드롭다운의 상태를 관리하고, isFolded 값에 따라 리스트를 펼치거나 접을 수 있다.
-
list 는 RenderList 라는 컴포넌트에서 처리되어 renderListItem 매개변수로 받아와 사용한다.
-
Time 타입은 기존의
<select>와<option>의 label 과 value 의 역할을 가져오되 selectable 을 추가해 disabled 처리할 수 있도록 구현했다.
export type Time = {
label: string;
value: string;
selectable: boolean;
};
export type TDropDownProps = {
list: Time[];
handleTimePicker: (value: string) => void;
currentValue: string | number;
placeHolder?: string;
selectable?: boolean;
filterTime?: (time: Time) => boolean;
};
const DropDown = ({
list,
handleTimePicker,
currentValue,
placeHolder,
selectable = false,
filterTime,
}: TDropDownProps) => {
const [isFolded, setIsFolded] = useState(true);
const handleClick = (e: React.MouseEvent) => {
setIsFolded((prev) => !prev);
};
const renderLisItem = (time: Time) => {
const result = filterTime ? filterTime(time) : true;
return (
<li
key={time.value}
onClick={() => handleClickTime(time.value)}
disabled={!time.selectable || !result}
>
{time.label}
</li>
);
};
return (
<div>
<ul $isFolded={isFolded} onClick={handleClick}>
{currentValue ? currentValue : placeHolder}
</ul>
{!isFolded && (
<ul>
<RenderList data={list} renderItem={renderLisItem} />
</ul>
)}
</div>
);
);- TimePicker 에서 DropDown 을 사용해 시간 선택 UI 를 구현했다.
정리
-
TimePicker에서 DropDown 컴포넌트를 활용하여 시간 선택 UI를 구현했다.
이로써 기존의<select>와<option>태그의 제한사항을 극복하고, 사용자 정의 가능한 디자인을 적용할 수 있게 되었다. -
현재 DropDown 컴포넌트는 TimePicker에 특화되어 개발되어 있어서 이를 범용적으로 사용할 수 있도록 리팩토링하는 것을 생각하고 있다.
-
간단한 셀렉트 박스는
<select>와<option>태그를 사용하는 편이 편리하지만, UI/UX 측면에서 중요한 요소를 다룰 때에는 직접 셀렉트 박스를 구현하여 사용자 경험을 높이는 것이 유용하다는 인사이트를 얻었다.
