지난 번 앱잼 기간동안 만들었던 select 버튼 커스텀한 것의 코드가 수정되어서 다시 올리게 되었다.
1) recoil의 state, type 설명과 사용된 곳 설명
2) 기능 단위로 코드 설명
주요 변동사항
-
isOpen이나 isSelected와 같은 상태들을 recoil로 관리하게 되었다.
-
dropdown item선택하면 api 연결하기 구현,
- 각 선택된 정렬 기준에 따라 api의 파람으로 넘겨서 데이터를 받아와야 했는데, type문제가 있어서 enum으로 해결하였다. -
선택한 기준이 정렬 기준(criteria) 옆에 | 와함께 들어가게 변경.
-
위에 카테고리가 선택되지 않았을 때 disabled 처리하기 구현
일단 해당 버튼 구현을 위해 사용된 state와 type을 정리해보앗습니다.
파일 구조는 SoringBox 안에서 SortingBtn이 map으로 반복됩니다.
velog코드가 가독성이 안좋아서 캡쳐된 이미지를 넣습니다.
1) state.ts
리코일 state와 type지정
정렬 기준은 다섯가지가 있었다.
1-1) isOpen
지금보니 굳이 안에 정렬버튼 안에 들어갈 문자열의 타입을 저렇게 좁힐 이유가 있을까 싶다.
isOpenState는 true면 dropdown리스트가 열리고, false면 닫히게 하도록 사용된다.
isOpenDefault는 셀렉트 버튼 중 한 버튼만 열려야 하기 때문에 switch문에서 선택한 버튼을 제외한 버튼들은 모두 닫아주기 위해 사용되었다.
1-2) isSelected
점점 변수가 많아지면서 변수명이 헷갈리기 시작한다...
- isSelectedState는 '어떤 어떤 정렬버튼이 선택되었는가'이다. -> isOpen과 같이 value로 boolean타입이 온다.
- 이 isSelectedState로 사용자가 선택한 정렬 버튼을 알 수 있다("가격", "수강 기간"...)
=> 해당 state로 선택된 버튼에 border, 그림자 효과를 줄 수 있다.
=> focus 선택자를 사용하면 마우스가 다른 곳을 클릭했을 때 효과가 사라지는 한계가 있기 때문에 isSelected를 사용해서 구현했다!
주석을 자세하게 달지 않아도 한눈에 이해가 갈 수 있게 가독성 좋은 변수명..절실함...
- dropListName : 버튼의 드랍리스트로 들어갈 기준들의 이름을 정리한 것이다.
=> sortingBtn을 map으로 돌려 tsx로 마크업할 때 사용된다. (일일이 직접 기준들을 넣어주지 않아도 해당 변수를 가져오면 알아서 리스트를 구성해줌) - currentSortingDefault : 정렬은 중복이 되지 않기 때문에 오직 한 정렬 기준에만 value가 들어가도록 switch문에서 currentSortingDefault사용.
1-3) currentSorting
- 유저가 선택한 정렬 기준을 알 수 있다.("높은 순", "긴 순서")
- 사용된 곳
=> api요청 시, 어떤 정렬기준으로 강의 리스트를 받아올지에 대해 사용자가 선택한 기준을 알 수 있게 한다.
=> 아래 그림처럼 버튼 안에 선택된 기준이 쏙 들어가는 기능 구현을 위해 필요하다.
지금 생각하면 isSelected를 굳이 만들어야했을까? 싶다. 빈문자열이면 falsy한 값이고, 문자열은 truthy한 값이기 때문에 굳이 boolean 타입의 value를 갖는 object를 만들지 않아도 되었을 것 같다.
파일별로 작성하고자 했는데, 글 가독성이 안좋아보여서 기능 구현단위로 작성합니다!
일단 글이 길어져서 이어서...
