팀과제 시작
이번 팀과제는 조금 다양한 페이지가 있다. 특히 그래프를 활용하는게 많아서 다른 팀원들은 데이터를 가공하는것에 많이 애먹고있다.
내가 맡은 부분은 공통으로 사용되는 컴포넌트인 드롭다운 컴포넌트, 페이지의 배경 컨테이너와 grid 형태의 리스트 구현을 맡았다. 오늘은 Dropdown을 만들었다
Dropdown
드롭다운 컴포넌트를 만드는 건 금방 할 줄 알았는데 하루를 다 날렸다. 생각보다 막히는 구간이 많았다.
태그
처음엔 select로 시작했다.
근데 select는 option을 담는 박스 부분을 어떻게 수정해야할지 알 수가 없어서 결국 포기했다. 당연히 여기저기 검색해봤지만 내가 못찾은것인지 select는 스타일이 유연하지 못하니 커스텀할때는 포기해라 라는 식의 답변이 많았다.
그래서 생각한 두번째 태그 details, summary
codepen에서 괜찮은 결과물을 봤다
이거 괜찮다고 생각했다. html만으로 숨기고 보여주는 형식이 갖춰져있다니 그냥 갖다써야겠다고 생각했다.
물론 잘됐는데 문제는 이게 나중에 가니 별로 의미가 없는것같았다. list의 아이템을 클릭했을 때와 Dropdown 외부를 클릭했을 때 리스트를 닫아주고싶었는데 이걸 구현하기 위해서는 결국 showList라는 state를 관리해서 className을 바꿔주는 식으로 만들었는데 이렇게 하면 details가 가진 이점이 별로 없는듯했다.
그리고 또 details와 summary의 본래 목적이 아닌 것 같기도 하고 누를때 details 태그에 속성에 open이 생기고 없어지는게 거슬려서 그냥 다른 태그를 사용하기로 했다.
결국 마지막엔 div, button
처음부터 이럴걸 그랬다. div로 감싸고 button을 누르면 아래 ul이 나오게 했다. 이렇게 보니 아무생각없이 만든것같지만 사실 이러한 시행착오들을 거쳐서 컴포넌트를 만들었다.
라이브러리 만들기..?
Dropdown을 만드는데 이게 내가 사용할 게 아니니까 다른사람들이 어떻게 공통적으로 편하게 사용할 수 있을까 고민하다 보니 시간이 많이들었다. 정말 조그만 컴포넌트지만 이렇게 고민할게 많다니. value를 어떻게 바꿔야하며 바뀌었을때 onChange 함수를 어떻게 실행시킬지 고민하고 한번 눌렀는데 왜 두번씩 실행되는지도 알아봐야했다.
결국 value는 string으로 고정시켜 배열로 넘겨받고, 클릭이 일어나면 이 value를 파라미터로 넘겨주어 onChange가 실행되도록 했다.
매번 다른 라이브러리 사용할 때 왜 항상 이렇게 복잡하게 만들고 docs나 홈페이지 또 검색을 하게 만드는지 불만이 많았는데 라이브러리 만드는사람들도 참 힘들겠구나 생각했다.
점점 추가되는 기능들
이게 처음에는 사이드바, 여러 페이지에서 드롭다운이 모두 사용되니 공통으로 만들자고 생각했고 간단할 줄 알았다. 그런데 이게 거의 비슷한데 조금씩 디테일이 달랐다. 모두 사용할 수 있도록 하기 위해 이런 디테일을 props로 커스텀해서 사용할 수 있도록 만들었다.
- 사이즈
사이드바에서는 더 큰 사이즈의 드롭다운이 사용되고 글자도 더 두껍다 - border
바깥 테두리가 있는 것이 대부분이지만 없는 것도 있다. - 색 마커
특정 dropdown은 그래프와 연관되어있어서 그래프에 사용된 것과 같은 색으로 표시되어있다.
이게 처음에는 정말 간결하고 마음에들었는데 기능 1,2,3번을 하나씩 적용할때마다 점점 내가 알던 컴포넌트가 아니게 되는 느낌이 들었다. 그런데 이게 좀만 더 붙이면 될것같기도 한데 이럴바엔 차라리 따로 분리하는게 나을 것 같기도 하고 애매했다. 하지만 아무튼 다 붙여서 사용할 수 있게 만들었다. 에드워드..오빠..? 키메라 연구를 멈추지 못한 쇼우 터커 박사가 이런 마음이었을까..? 컴포넌트 분리와 재사용은 참 어려운 것 같다.
아무튼 오늘 시행착오를 많이 겪었는데 내일은 좀 덜했으면 좋겠다.
