select option 값을 효율적으로 작성하는 법

select를 이용해 값을 출력한다고 해보자.

 

예를 들어 바나나, 사과, 토마토를 select로 만든다면

 <select>
<option value="바나나">바나나</option>
<option value="사과">사과</option>
<option value="토마토">토마토</option>
</select>

 

이런식으로 작성하면 된다.

 

그러나 option 값이 많이 필요하다면?

그리고 재사용해야 한다면?

 

위 사진처럼 선택해야 하는 항목이 많아진다면

위 방식대로 코드를 작성하는 것이 부담스러워진다.

매번 사용할 때마다 option 값을 적어줘야 하는 것이다.

 

이때는 map을 이용해 간단하고 간결하게 표현해줄 수 있다.

 

0부터 59까지의 숫자를 선택해야한다고 해보자.

먼저, 사용해야 할 항목을 한 묶음으로 선언해준다.

 

const minutes = [
    { label: "00", value: "00" },
    { label: "01", value: "01" },
    { label: "02", value: "02" },
    { label: "03", value: "03" },
    { label: "04", value: "04" },
    { label: "05", value: "05" },
    { label: "06", value: "06" },
    { label: "07", value: "07" },
    { label: "08", value: "08" },
    { label: "09", value: "09" },
    { label: "10", value: "10" },
    { label: "11", value: "11" },
    { label: "12", value: "12" },
    { label: "13", value: "13" },
    { label: "14", value: "14" },
    { label: "15", value: "15" },
    { label: "16", value: "16" },
    { label: "17", value: "17" },
    { label: "18", value: "18" },
    { label: "19", value: "19" },
    { label: "20", value: "20" },
    { label: "21", value: "21" },
    { label: "22", value: "22" },
    { label: "23", value: "23" },
    { label: "24", value: "24" },
    { label: "25", value: "25" },
    { label: "26", value: "26" },
    { label: "27", value: "27" },
    { label: "28", value: "28" },
    { label: "29", value: "29" },
    { label: "30", value: "30" },
    { label: "31", value: "31" },
    { label: "32", value: "32" },
    { label: "33", value: "33" },
    { label: "34", value: "34" },
    { label: "35", value: "35" },
    { label: "36", value: "36" },
    { label: "37", value: "37" },
    { label: "38", value: "38" },
    { label: "39", value: "39" },
    { label: "40", value: "40" },
    { label: "41", value: "41" },
    { label: "42", value: "42" },
    { label: "43", value: "43" },
    { label: "44", value: "44" },
    { label: "45", value: "45" },
    { label: "46", value: "46" },
    { label: "47", value: "47" },
    { label: "48", value: "48" },
    { label: "49", value: "49" },
    { label: "50", value: "50" },
    { label: "51", value: "51" },
    { label: "52", value: "52" },
    { label: "53", value: "53" },
    { label: "54", value: "54" },
    { label: "55", value: "55" },
    { label: "56", value: "56" },
    { label: "57", value: "57" },
    { label: "58", value: "58" },
    { label: "59", value: "59" },
  ];

나는 시간의 분 선택을 위해 사용하기 때문에

minutes로 선언해주었다.

 

그리고 option 태그를 map을 이용해 간소화해준다.

<select className={styles.minutes}>
            {minutes.map((minute) => (
              <option value={minute.value}>{minute.label}</option>
            ))}
          </select>

위의 값을 map을 이용해 빙글빙글 돌면서 하나씩 할당해주는 것이다.

minutes을 재사용하기에도 편리하고

코드가 한결 깔끔해진 것을 알 수 있다.