[리액트+타입스크립트] 커스텀 셀렉트 박스(custom select box) 만들어보기)_리팩토링 추가(2023-07-29)
개요 페이지 곳곳에서 사용되는 정렬 기능을 select box를 이용해 구현하고자 하였습니다. 피그마에서 보면 대충 위와 같은 select box입니다. 페이지마다 사용되는 정렬 내용이 다르기 때문에 재사용이 가능한 컴포넌트로 만들기 위해서는 정렬 옵션을 props로 받아야 할 것 같습니다. 그리고 옵션에 대한 value를 저장해야하므로 setValue 또한 받아야 할 것 같습니다. 요구사항 select box를 누르면 선택 옵션이 아래로 펼쳐지고 선택을 하면 해당 옵션으로 value가 바뀌어야 합니다. 선택 옵션이 펼쳐졌을 때 외부를 클릭하면 현재 옵션 그대로 저장하면서 박스가 닫혀야 합니다. 구현 먼저 select box 외부를 클릭했을 때 옵션 리스트가 닫히도록 구현을 하려면 useRef를 이용해서..
개발냥이/타입스크립트(Typescript)
2023. 7. 6. 16:19
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- CS
- 자바트리
- Nest
- Queue
- JavaScript
- BFS
- 스프링부트
- 자바dp
- 스프링
- 프로그래머스
- 알고리즘
- java
- 자바스크립트
- 이분탐색
- dfs
- 형변환
- 리액트
- Comparator
- 타입스크립트
- 정렬
- DP
- 백준
- 자바bfs
- 자바
- 해시맵
- SQLD
- JPA
- SQL
- Algorithm
- Spring
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
글 보관함