react-select 커스텀 설정

현재 프로젝트를 진행하면서 html select에서 react-select로 변경하는 과정에서 react-datepicker와 마찬가지로 적지 않게 삽질을 했습니다.

사실 value props를 제외하고는 간단한 편이지만 react-select 관련 설정법도 공유해보고자 합니다. 

 

제가 설정한 props 목록입니다.

• styles: zIndex를 부여하여 dropdown 목록이 모바일 환경에서도 항상 위로 보이도록 설정
• value: 선택한 option이 select에 보이도록 설정 (신기하게도 stream 문법을 사용해야 합니다.)
• placeholder: 선택하지 않았을 때 default 메시지
• onChange: 선택한 option이 바뀌었을 때 호출되는 콜백 함수
• options: option 배열

간단한 구현 코드입니다.

 

 

[react 버전] 16.13.1

[react-select 버전]: 3.1.0

[출처]

https://react-select.com/home