[React] selectBox 직접 구현하기

selectBox를 사용하기 위해 기존에 제공되는 select 태그를 사용해도 되지만, selectBox 클릭 시 나타나는 options를 커스텀하기 힘들다는 단점이 있다. 

 

ul과 li를 사용하여 selectBox를 직접 구현 할 시 options를 li로 나타내기 때문에 css를 사용하여 자유롭게 커스텀 할 수 있다. 

 

css를 제외하고, selectBox는 

 

const CustomSelect = ({ handleChangeOption, isShowOptions }) => {

return (

<div className="sbc_selectBox">

<label

onClick={() => {

handleChangeOption()

}}

className="sbc_label"

>

카테고리를 선택해주세요.

</label>

<ul

style={isShowOptions ? { display: 'block' } : { display: 'none' }}

className="sbc_ul"

>

<li>option1</li>

<li>option2</li>

<li>option3</li>

</ul>

</div>

)

}

 

위와 같이 컴포넌트로 만들 수 있다. 

 

 

options가 열린지의 유무를 state로 관리하고, label을 클릭했을 시 해당 state의 boolean 값을 바꿔주는 형태로 selectBox를 구현할 수 있다.

 

추후 options와 선택 된 상태를 관리하는 setState 함수를 props로 받음으로써, 선택 된 값의 상태 또한 관리할 수 있다.