React 숫자로 배열만들기

숫자로 배열만들어 .map 사용하기

2차 프로젝트 마이허니트립 항공권 예약 사이트를 클론코딩 하던중 심각한 문제점이 생겼버렸다...

내가 담당한 구역은 항공권 예약 페이지!! 예약자 정보와 탑승객 정보를 받아서 백엔드에 전달해줘야하는데, 내가 받는 데이터에는 탑승객 수 가 숫자로만 들어오기때문에 .map을 돌릴 수 가 없었다...ㅠㅠ

한두명은 내가 직접입력하면 좋지만 항상 최악을 생각하면 100명 단체 예약이면 하나하나 입력 할 수 없다는걸 알고 방법을 찾게 되었다.
또한 날짜 데이터를 받으려면 1일 ~ 31일 중 한가지를 고를수 있도록 해야하는데 이것 또한 같은 문제점이었다.

그러던중 스프레드연산자 [...Array] 를 알게되었고 이 방법을 사용해 두가지 문제점을 해결하였다.

숫자만 받아서 map문 돌리기

문법 : [...Array(숫자)] 
출력 : [undefined, ... * 숫자 ] 

{[...Array(Departure_Data.person)}.map((undefined,index) => {
  실행시킬내용~~
}

map문 활용하여 단순반복 실행하기

{[...Array(31}.map((undefined,index) => {
  return (
      <option key={idx} value={idx + 1}>
         {idx + 1}
      </option> );
})}

이런식으로 가상의 배열을 만들어 map문을 돌려서 해결 할 수 있었다.

단점

가상의 배열을 통해 map을 돌리기 때문에 각 요소에 접근이 힘들었고, 구조분해 할당을 사용 할 수 없어서 코드의 양 및 가독성이 떨어졌다... 더 좋은 방법을 찾아봐야겠다...