이 코드는 드롭다운 메뉴를 렌더링하고 node를 선택한다. 그림 7-6처럼 되려면 constructor()에서 상태를 설정해준다(Node.js 만세!).
다중 선택 요소를 사용해야 하는 경우도 있다. React에서는 JSX를 작성할 때 별도의 값을 주지 않고 multiple 속성만 작성하면 React가 true로 처리한다. 또는 명시적으로 multiple={true}라고 값을 주어도 된다.
Tip
일관성을 유지하고 혼란을 막기 위해 모든 불 값을 “”가 아니라 {}로 감쌌다. “true”와 {true}의 결과는 같다. 그렇지만 “false”라고 입력하면 true가 된다. 자바스크립트에서는 문자열 “false”가 참 값이라 true로 처리되기 때문이다.
여러 항목을 기본으로 선택하려면 <select>의 value 속성에 배열로 값을 전달한다. 예를 들어 다음 예제 코드에서는 Meteor와 React를 선택했다.
<select multiple={true} value={['meteor', 'react']}>
<option value="meteor">Meteor</option>
<option value="react">React</option>
<option value="jQuery">jQuery</option>
</select>
그림 7-7을 보면 multiple={true}는 다중 선택 요소를 렌더링하고, Meteor와 React 값이 미리 선택되어 있다.
▲ 그림 7-7 여러 항목을 선택한 경우의 렌더링