[React] option 태그 여러개 만들기

---

 

#1. option 태그 여러개 만들기

사용자가 정보를 입력할 때 <select> 태그가 자주 쓰일 것이다.

그 중 국가번호는 선택할 번호가 엄청 많다. (정확히 몇개인지는 모름 ..)

그런데 이 많은 번호를

<select>
  <option>+1</option>
           .
           .
           .
  <option>+82</option>
           .
           .
           .
  <option>+852</option>
</select>

이런 식으로 구현하는것은 매우 하드코딩 스럽고 비효율적이다.

그럼 어떻게 구현해야할까?

 

1. 원하는 갯수 만큼 빈 칸을 갖는 배열을 만든다.

• new Array( )는 주어진 칸 만큼의 빈 배열을 생성한다.
• 예를 들어 123 ~ 456 사이의 갯수만큼 생성한다고 가정.

new Array(456 - 123 + 1);

 

2. 빈 배열을 비구조 문법으로 복사

• 생성자를 통해 생성된 객체는 즉시 메서드를 사용하지 못한다. (문법적 제약)
• 그렇기 때문에 아래의 방법으로는 실행되지 않는다.

(new Array(456 - 123 + 1)).map(...);  // 실행안됨

• 생성자를 통해 만든 객체를 사용하기 위해서는 비구조 문법을 통해 복사하여 탐색관련 메서드를 사용해야 한다.

[...new Array(456 - 123 + 1)].map(...)  // 이렇게 사용

 

3. 복사한 배열을 탐색하여 반복 수행

• 복사된 배열은 원소가 모두 undefined를 갖고 있다.
• 그렇기 때문에 0부터 시작하는 인덱스 값에 시작할 숫자 값을 더해서 123 ~ 456 까지의 option 태그를 구현한다.

<select name="selectNumber">
  <option value="">숫자 선택</option>
  {[...new Array(456 - 123 + 1)].map((v,i) => {
    return (
      <option key={i} value={123 + i}>{123 + i}</option>
    );
  })}
</select>

 

 구현 결과

123 ~ 456 까지 option 생성

단 코드 몇 줄로 123~456까지 option 태그를 생성하였다.

잘 익혀두면 아주 유용하게 쓰일 것 같다.