[react] 리액트에서 select 의 option 의 값( value) 가져오려면 selected가 아닌 onChange를 써서 value 값을 가져오자

자바스크립트만 쓸 때는 select 의 옵션 값은 selected 를 써서 가져왔는데, 오늘 리액트에서 이거와 똑같이 하려고 하니까

아래 에러가 떳다.  

 

검색해보니 리액트에서는 위의 기능을 지원해주지 않아서 그런거라 하더라. 리액트에서는 옵션 값을 가져 오기 위해서는 select 태그에서 onChange 를 적용한 후 event.target.value 를 통해 선택된 해당 값을 가져올 수 있다. 뭐가 어찌되었든 복잡하지 않아서 다행이다.

const [selectVal,setSelectVal] = useState('');

const changeSelectValue = (event) =>{
    setSelectVal(event.target.value) 
};

    return (
        <div>
             <select 
        //onChange 이벤트를 적용해서 select의 value에 입력(선택)된 값을 가져옴
               onChange={changeSelectValue}
               className='movie_side_select' id='sort_by'>           
                  {optionText.map((text,i)=>{
                      return (
                          <option 
                              key ={i}
                              value={`${optionVal[i]}`}                                  
                          >{text} </option> 
                      )     
            <select/>