<select
onChange={handleChange}
name="selectBox"
aria-label="옵션선택"
style={{
border: "1px solid #eee",
width: "100%",
height: "50px",
color: "#ccc",
marginBottom: "15px",
padding: "16px"
}}
>
<option selected disabled style={{ color: "#ccc" }}>
---옵션선택---
</option>
{(optionValue || []).map((options, idx) => (
<option key={idx} value={options} style={{ color: "#000" }}>
{options}
</option>
))}
</select>
위와같이 selected 를 사용했을시 나타나는 경고이다.
react에서는 selected 를 사용하는 대신 최상위 select 에 defaultValue 를 지정하여
그놈을 맨처음 보이게 할 수 있다.
<select
defaultValue="default"
onChange={handleChange}
name="selectBox"
aria-label="옵션선택"
style={{
border: "1px solid #eee",
width: "100%",
height: "50px",
color: "#ccc",
marginBottom: "15px",
padding: "16px"
}}
>
<option value="default" disabled style={{ color: "#ccc" }}>
---옵션선택---
</option>
{(optionValue || []).map((options, idx) => (
<option key={idx} value={options} style={{ color: "#000" }}>
{options}
</option>
))}
</select>
요런식으로. disabled 는 선택 안되게 막아주려고 넣음
출처: https://andwinter.tistory.com/326 [index.html]