공통 컴포넌트로 드롭다운을 맡았다.
근데 드롭다운을 구현하기도 전에 팀원분이 컴파운드 패턴을 활용해서 해보자고 하셨다.
그게 뭔데요...!
어떻게 하는 건데요...
그래서! 일단은 일반적으로 드롭다운을 구현해보고 그때 나눠보기로 했다.
일단 보통의 자바스크립트로 구현할 수는 없다.
그래서 고려한 것
설계 시 고민 포인트
- 드롭다운 안에 들어갈 아이템이 동적으로 들어가야 함
- 아이템의 형식(문자열인지,...)
- 사용자가 선택했을 때 어떤 동작을 하는지
- 드롭다운 창 종료
- 디자인(?)
📌 드롭다운의 아이템
- 아이템은 동적으로 들어감!
- (그리고 아이템은 문자열임)
- 다만 그외의 것들은 여러 곳에서 재사용이 가능해야 하므로 컴포넌트로 구현
아이템이 그래도 문자열이라 다행이죠?(아마도요)
📌 사용자가 선택했을 때 동작
드롭다운에서 사용자가 아이템을 선택했을 때 어떤 동작을 하느냐는,
결국 그 드롭다운이 무엇을 위해 쓰이느냐에 따라 달라진다.
(1) 폼(Form) 입력용 드롭다운
회원가입 시, 혹은 체험 활동을 등록할 시 항목을 고를 때 활용
드롭다운으로 선택한 값을 state에 저장 후, 서버로 제출할 때 등
-> "값 선택 도구"로 동작
내 프로젝트의 경우 [내 체험 수정, 내 체험 등록] 시 카테고리, 시작 시간, 종료 시간, [예약 현황]에 해당
(2) UI 설정용 드롭다운 (테마, 정렬 등)
사용자가 "다크모드 / 라이트모드" 선택 혹은 리스트를 "가격 / 인기 / 최신" 등으로 정렬할 때 활용
-> "UI를 바꾸는 트리거" 역할로 동작
내 프로젝트의 경우 [메인 페이지]에서 정렬 방식을 정할 때 사용
(3) 데이터 필터링용 드롭다운
상품 목록, 게시글 목록, 통계 차트 등을 필터링할 때 활용
-> 선택된 카테고리에 따라 데이터 API를 다시 요청하거나,
이미 로드된 데이터 중 일부만 보여줌
-> "데이터를 바꾸는(필터링하는) 입력장치" 역할로 동작
내 프로젝트의 경우에는 존재하지 않음
(4) 내비게이션용 드롭다운 (메뉴 / 이동)
상단 메뉴바에서 특정 메뉴를 입력하고 다른 페이지로 이동할 때 활용
-> "링크 이동"을 위한 UI 역할로 동작
(5) 액션용 드롭다운
테이블에서 각 행(row)에 더보기 버튼을 클릭하고,
그 안에서 "수정", "삭제", "보기" 같은 옵션을 제공할 때 활용
- 동작 예시
- "삭제" 클릭 -> 해당 아이템 ID로 삭제 요청 API 호출
- "수정" 클릭 -> 모달창 열기 / 수정 페이지로 이동
- "보기" 클릭 -> 상세 현황 페이지로 이동
-> "명령(action) 중심"으로 동작
(컨텍스트 메뉴(Context Menu)라고 볼 수도 있다.)
그래서 나는!
동작하는 건 사용자가 정의할 수 있도록
콜백 함수를 props로 받는 구조로 설계했다.
onSelect: (value: string) => void;즉, 드롭다운 컴포넌트 자체는
"아이템을 보여주고, 선택된 값을 알려주는 역할"을 담당
그 외의 행동이나 동작은 사용하는 부모가 결정하도록 위임한다.
📌 드롭다운 창 종료
- esc 버튼을 눌렀을 때 종료되거나,
- 드롭다운 창 외의 영역을 클릭하면
창이 종료되는 동작 필요
📌 디자인
또 각각의 드롭다운마다 적용되는 디자인이 달라서 고려해야 한다.
- border
- width
- placeholder
- padding
- margin
뭐... 등등 다양하게...
아무튼 정말 컴포넌트의 역할을 해서, 최대한 재활용이 가능하도록 설계하려고 노력했다.
