Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option> 해결 방법

리액트 프로젝트 진행 중 select 태그를 사용하던 중 생긴 경고입니다.

<select name="" id="">
    <option value="01" selected>서울특별시</option>
    <option value="02">부산광역시</option>
    <option value="03">대구광역시</option>
</select>

경고 내용은! 위의 코드처럼 option 안에서 selected를 사용하지 말고,

대신 select태그 안에서 defaultValue 또는 value를 사용하라고 말해 줍니다.

 

리액트 공식 문서에는 value를 사용하라고 나와 있습니다.

https://reactjs.org/docs/forms.html#the-select-tag

Forms – React

 

대신 value만 사용하게 될 경우 아래와 같은 경고문을 받습니다.

 

Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`

그렇기 때문에 value를 사용할 경우 onChange를 추가해 주거나

defaultValue를 사용해 줍니다.

<select name="" id="" defaultValue="01">
    <option value="01" selected>서울특별시</option>
    <option value="02">부산광역시</option>
    <option value="03">대구광역시</option>
</select>

 

++ value를 사용할 경우 onChange를 통해 변경해줄 수 있는 값을 사용해야 됩니다.