프엔 스터디 #2를 진행하다가 DropdownList 컴포넌트를 가용성 있게 만들어오는 과제를 받게 되었따.

지금까지 내가 해온 컴포넌트는 ‘컴포넌트’라고 부를 수 조차 없는 건가..?

라고 생각하면서 속상함도 많이 느꼈지만… Typescript를 공부하면서 범용성 좋은 컴포넌트를 만들어보진 못한 것 같아, 새로운 Dropdown 컴포넌트를 구성하기 시작했다.

type SingleItem = string | number; //string이거나 number인 경우

interface ObjectItem {
  id: string | number;
  name: string | number;
  label: string | number;
  value: SingleItem;
}
/* ObjectItems들은 어떤 상황으로 봐야될까?,? 잘 모르게따..*/

각 사용 범위에 맞게 item과 value를 정해주고, Dropdown의 Props로 number, string, object 객체든 뭐든 받아낼 준비를 해야 했다.

하지만, Typescript라는 특성으로 인해서, 각 아이템의 명확한 타입을 지정해주지 않으면, 완성도 높은 컴포넌트를 작성할 수 없다는 것을 깨닫는 것은 별로 오래 걸리지 않았다;

export type DropdownItem = SingleItem | ObjectItem;

export type을 통해 다른 위치에서도 Dropdown에 넣을 수 있는 Item의 타입을 지정해주고자 했다.

interface Props {
  items: SingleItem[] | ObjectItem[];
  selected: SingleItem | ObjectItem;
}

위와 같은 형식으로 코드를 진행함에 있어서 사실 큰 문제는 없었다.