셀렉트 요소의 기본값 없애기

dev | 2018-11-25

<select>
  <option value="1">옵션1</option>
  <option value="2">옵션2</option>
  <option value="3">옵션3</option>
</select>

브라우저는 첫번째 옵션 요소인 '옵션1'을 선택된 상태로 보여준다. 이 때 셀렉트의 value 값을 확인해 보면 선택된 옵션의 값인 '1'이고 티입은 문자열(string)이다. 셀렉트의 value 값을 undefinednull, 또는 선택할 수 없는 '4'와 같은 값으로 지정 하면 브라우저는 기본값이 선택되지 않은 빈 셀렉트 요소를 보여준다. 이 때 value를 확인해 보면 모두 빈 문자열('', empty string)이고 타입은 역시 문자열이다. 서식을 리셋(HTMLFormElement.reset())하는 경우 다시 첫번째 '옵션1'이 선택된 상태로 되돌아 간다.

리액트의 상태가 제어되는 컴포넌트(controlled components)의 경우 약간 다르게 동작한다. setStateundefinednull을 설정하면 변화가 없고 선택할 수 없는 값이나 빈문자열을 지정해야만 첫번째 요소가 선택된 것으로 변한다. 첫번째 요소가 선택되지 않은 상태로 값을 설정하는 것은 불가능하다. 그래서 기본 값을 없애기 위해서는 값이 없는 빈 옵션 요소를 추가해야 한다.

<option key="default-empty" hidden></option>

서식을 리셋하면 아무것도 선택되지 않은 빈 옵션이 선택된다. undefinednull을 설정했을 때에도 빈요소를 선택하려면 아래처럼 value를 설정해 주면 된다.

<select value={this.state.s || ''}>

하지만 이렇게 해도 state에는 여전히 undefinednull이 들어 있다는 점을 유의해야 한다.

Comments

Post a comment

:

: 공개 되지 않습니다. Gravatar를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.