[ React ] select 태그 사용 시 에러 warning: use the `defaultvalue` or `value` props on <select> instead of setting `selected` on <option>.

 

select 태그를 통해 option 을 선택할 수 있도록 만들던 도중에
warning: use the `defaultvalue` or `value` props on <select> instead of setting `selected` on <option>.
이라는 error 메세지를 만났다.

 

 

기존 코드

        <SelectBox onChange={onChange}>
            <option disabled selected hidden> 올리실 곳을 선택해주세요 </option>
            <option value="팝"> 팝 </option>
            <option value="클래식및재즈"> 클래식 / 재즈 </option>
        </SelectBox>

 

첫 번째 옵션은 select 가 접혀있을 때 가장 먼저 보여지는 안내 용도로 작성한 option 이다.

disabled selected hidden 을 통해 기본적으로 옵션을 보여주지만 선택은 하지 못하게 해놨다.

 

하지만, 콘솔에 위의 이미지와 같이 

warning: use the `defaultvalue` or `value` props on <select> instead of setting `selected` on <option>.

에러가 발생했다.

 

 

오류 해결 코드

        <SelectBox defaultValue="default" onChange={onChange}>
            <option value="default" disabled> 올리실 곳을 선택해주세요 </option>
            <option value="팝"> 팝 </option>
            <option value="클래식및재즈"> 클래식 / 재즈 </option>
        </SelectBox>

 

인터넷 검색 결과 react 에선 selected 대신 value 값을 사용해야한다고 나와있었다.

 

defaultValue 설정을 통해 value 값을 default로 지정해놓은 안내 문구를 보여주고,

select 를 클릭하면 안내문구는 안보이고 아래 2가지의 옵션만 보여준다.