react select value와 실제 내용

select에 화면 상 표시되는 내용 : 선택된 옵션 태그의 내부 텍스트 값

select onChange에서 감지하는 event 객체 : select 태그. 그런데 왜인진 모르겠지만 event.target.value는 선택된 option 태그의 value로 나타남.

select의 value prop : 같은 value를 가진 option을 띄움

select의 defaultValue prop : 같은 value를 가진 option을 디폴트로 선택 상태로 만듦

이런 이유로 API로 받아온 데이터 리스트를 대상으로 option을 렌더링했다면, 각 데이터의 name 값을 option 내부 텍스트로 두고(실제 화면 상 select에 표시됨), 데이터의 id는 state로 두어 select의 value와 option의 value로 두는게 가능하다.