React useState로 select 처리하기

const OPTIONS = [
  {value:1, label:"1번 옵션"},
  {value:2, label:"2번 옵션"},
  {value:3, label:"3번 옵션"},
  {value:4, label:"4번 옵션"},
  {value:5, label:"5번 옵션"},
]

const Component = () => {
    const [selectedValue, setSelectedValue] = useState();

    const handleChange = (e) => {
      setSelectedValue(e.currentTarget.value)
    }

    return (
      <select onChange={handleChange} value={selectedValue}>
        {OPTIONS.map((option)=>(
          <option key={option.value} value={option.value}>{option.label}</option>
        ))}
      </select>
    )

}

 

1. 옵션 리스트를 value, label 로 이루어진 객체 배열 형태로 정의한다.

  - value는 각 옵션 값을 구분 짓는 고유한 값이다.

  - label은 화면에 보여지는 옵션 텍스트 값이다.

 

2. map을 이용해 option 리스트를 렌더링한다.

  - map을 사용하면 엘리먼트 간에 고유한 키 값을 정의해줘야하기 때문에 key 값을 할당한다.

 

3. onChange 핸들러를 정의한다.

  - select에 change 이벤트(셀렉트 박스의 특정 옵션 값을 선택)가 발생할 때마다 selectedValue 상태값에 선택된 value를 할당해준다.

  - 선택된 value는 onChange 함수 인자값을 통해 접근 가능하다. (e.currentTarget.value)

  - selectedValue 상태값을 select의 value 속성에 할당해 주어 선택한 옵션이 무엇인지 알려준다.