Article
셀렉트 요소의 기본값 없애기
본문
<select>
<option value="1">옵션1</option>
<option value="2">옵션2</option>
<option value="3">옵션3</option>
</select>브라우저는 첫번째 옵션 요소인 '옵션1'을 선택된 상태로 보여준다. 이 때 셀렉트의 value 값을 확인해 보면 선택된 옵션의 값인 '1'이고 티입은 문자열(string)이다. 셀렉트의 value 값을 undefined나 null, 또는 선택할 수 없는 '4'와 같은 값으로 지정 하면 브라우저는 기본값이 선택되지 않은 빈 셀렉트 요소를 보여준다. 이 때 value를 확인해 보면 모두 빈 문자열('', empty string)이고 타입은 역시 문자열이다. 서식을 리셋(HTMLFormElement.reset())하는 경우 다시 첫번째 '옵션1'이 선택된 상태로 되돌아 간다.
리액트의 상태가 제어되는 컴포넌트(controlled components)의 경우 약간 다르게 동작한다. setState로 undefined나 null을 설정하면 변화가 없고 선택할 수 없는 값이나 빈문자열을 지정해야만 첫번째 요소가 선택된 것으로 변한다. 첫번쨰 요소가 선택되지 않은 상태로 값을 설정하는 것은 불가능하다. 그래서 기본 값을 없애기 위해서는 값이 없는 빈 옵션 요소를 추가해야 한다.
<option key="default-empty" hidden></option>서식을 리셋하면 아무것도 선택되지 않은 빈 옵션이 선택된다. undefined나 null을 설정했을 때에도 빈요소를 선택하려면 아래처럼 value를 설정해 주면 된다.
<select value={this.state.s || ''}>하지만 이렇게 해도 state에는 여전히 undefined나 null이 들어 있다는 점을 유의해야 한다.
출처 : 신현석블로그(https://hyeonseok.com/soojung/dev/2018/11/25/845.html)
