Select Tag Option 동적 생성

select안에 들어가는 option을 동적 생성하려면 다음과 같은 방식으로 접근할 수 있다.

    let list = () => {
      let result = []

      Array_Data.map( (data, index) => {
        result.push(
          <option key={index+"_"} value={index}>{index + 1}</option>
        )
      })
  
      return result
    }

필자의 경우 SIMULATION_PRESET 안에 있는 배열의 개수 만큼 .map으로 접근 후 loop를 돌려 result에 option 태그를 계속해서 넣어주었다. 그 후 JSX태그 안에 {list} 형식으로 넣어주면 끝이다. map의 특성상 key와 value를 요구하기 때문에 key를 넣어주었다. 없어도 된다.

				{ 					
				  props.data == 0 
                  ?
                  <></>
                  :
                  <select onChange={ChangeValue}>  
                  {list()}
                  </select>
                }

option의 값을 가져올 때는 onChange 이벤트로 접근하여 해당 이벤트에 등록된 함수에서 이벤트 파라미터를 이용하여 e.target.value 형태로 값을 가져올 수 있다.

function ChangeValue(e){
      console.log(e.target.value)

      for(let i = 0; i < Array_Data[e.target.value].length; ++i){
        props.setArray(lists => [...lists, {
          id: Array_Data[e.target.value][i].id,
          name: Array_Data[e.target.value][i].name,
          count: Array_Data[e.target.value][i].count,
          type: Array_Data[e.target.value][i].type
        }])
      }
    }