[React] React에서 라이브러리 없이 select box 구현하기

현재 개인 프로젝트로 중고차 사이트를 하나 만들고 있는데 메인 페이지에 검색 기능을 구현하려 한다.

여러개의 select box를 통해 조건을 설정하고 거기에 맞는 매물을 출력해주어야 한다.

select box에서 조건을 설정하고 결과 조회를 누르면 하단에 필터링 된 매물이 뜨는 방식

 

사실 리액트에는 react-select 라이브러리가 있어서 그걸 사용하면 되는데 나는 코딩이 어느정도 진행 된 상태에서 알았기 때문에 우선 구현부터 하고 해당 라이브러리는 나중에 기회가 있을 때 사용해보려 한다.

 

리액트에서 select box 구현하는게 뭐가 달라?

보통 select box를 구현하라는 지시를 받으면 아마 다음과 같이 마크업을 할것이다.

<select name="options">
    <option value="option1">옵션1</option>
    <option value="option2">옵션2</option>
    <option value="option3">옵션3</option>
    <option value="option4">옵션4</option>
</select>

 

리액트에서도 이 방식이 불가능한건 아니지만, 다음 사항들을 고려해봐야 한다.

1. <option> 태그의 개수가 얼마나 되는가?
2. <option> 태그의 내용이 항상 일정한가?

위 코드의 select box는 option이 네 개 뿐이라 단순 마크업으로 구현해도 무방하지만 만약 option이 50개, 100개 이런 식으로 늘어나거나 option의 value 값이 수시로 변하는 상황이라면 주기적으로 코드를 수정해야 하는 노가다 작업이 필요하다.

따라서 가능하면 마크업 수정을 가장 적게 할 수 있는 방식으로 구현해야 한다.

 

진행중인 작업에서의 예시

제작중인 페이지의 select box 중 '연식'에 해당하는 것이 앞서 설명한 2번 케이스가 되겠다.

포스팅 작성중인 날짜 기준으로 2025년부터 선택 가능

 

포스팅 작성중인 날짜 기준으로 2025년이므로 2025년부터 10년 전 까지인 2015년까지 선택 가능하도록 구현했다.

이 select box는 포스팅 작성일 기준 약 1년이 지나면 '2016년 이전 ~ 2026년식' 까지로 선택지가 자동으로 바뀔 것이다.

const yearSelect=[];

for(let i=0; i<=10; i++){
    yearSelect.push({id:i, value:new Date().getFullYear()-i, content:new Date().getFullYear()-i + `${i===10 ? '년 이전' : '년식'}`})
}

 

우선 select box에 들어갈 연도의 객체를 생성해 yearSelect 배열에 넣어줄 것이다.

각 연도 객체는 id, value, content 속성을 갖는다.

 

생성된 연도 객체를 담은 yearSelect 배열

 

이제 생성된 yearSelect 배열과 map() 매서드를 활용해 select box의 option을 맵핑한다.

<select name="year" id="year">
    <option>연식</option>
    {yearSelect.map((item)=>(<option key={item.id} value={item.value}>{item.content}</option>))}
</select>

 

각 객체의 id는 맵핑된 option의 key 값으로, 객체의 value값은 option의 value로 지정했으며, content 값은 select box에 표시되는 텍스트로 만들었다.

참고로 다른 select box도 map() 매서드로 구현은 가능하지만 value 값이 유동적인것도 아니고 option 개수가 많은것도 아니어서 그냥 HTML로 마크업했다.