[React] option select 속성, defaultValue & value 속성 에러

React에서 option에 selected 속성을 사용하면 이런 에러가 뜬다. selected 대신 defaultValue나 value 속성을 사용하라는 에러이다.

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

 

그렇다고 selected 속성 대신 defaultValue와 value를 모두 뜨면 이런 에러가 뜬다.

 

Warning: Select elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled select element and remove one of these props.

 

해결방법

selected 속성 사용X, defaultValue와 value 속성 동시에 사용X

대신 아래처럼 작성하면 된다.

<select onChange={handleChange} value={selectedOption || "default"}>
    <option value="default">디폴트로 선택된 옵션</option>
    <option value="other">다른 옵션</option>
</select>

이렇게 하면 처음 렌더링 될 때 default 값으로 설정되어 있다가 새로운 값을 선택하면 useState로 관리하는 selectOption을 통해 선택된 값을 바꿀 수 있다.

만약 default를 placeholder로 사용하고 싶다면 hidden 속성을 추가해주면 된다.

 

 

styled-components를 통해 select 태그의 placeholder 색상을 바꾸고 싶다면 아래 글 참고

2024.08.04 - [CSS/styled-components] - [styled components] select 태그 placeholder 색상 설정