권장 브라우저 안내

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

다크 모드로 보기 라이트 모드로 보기

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

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

본문 바로가기

News

웹스리퍼블릭의 공지사항을 확인하세요.

Our News. Get the latest news from Websrepublic right now Our News. Get the latest news from Websrepublic right now Our News. Get the latest news from Websrepublic right now
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

Contact us

궁금하신 사항을 남겨주세요!
확인 후 빠른 답변 드리겠습니다.
  • T. websre@naver.com
  • M. 1800-9356
  • 예산을 선택해 주세요.
    • 100만원 이하
    • 300만원 이하
    • 500만원 이하
    • 700만원 이하
    • 1000만원 이하
    • 1000만원 ~ 2000만원
    • 2000만원 이상


디자인 샘플보기

상담톡
궁금한게 있으신가요? 무엇이든 물어보세요.