권장 브라우저 안내

이 웹사이트는 Internet Explorer 9 버전 이상에서만 이용 가능합니다.
편리한 사이트 이용을 위하여 최신 브라우저로 업그레이드해주시기 바랍니다.

저희와 함께 하시겠습니까?

프로젝트 의뢰는 아래로 문의 주시기 바랍니다.
websre@naver.com
Tel: 1800-9356

  • Portfolio

    Our work 에서 자세한 정보를 확인하세요.

  • General

    202, 71-2, Gajang-ro, Seo-gu, Daejeon
    대전광역시 서구 가장로 71-2(괴정동, 온누리빌) 202호

본문 바로가기
News
November 27, 2018
Article

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

본문

<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이 들어 있다는 점을 유의해야 한다.

 

출처 : 신현석블로그(https://hyeonseok.com/soojung/dev/2018/11/25/845.html

디자인 샘플보기