React에서 select 다루기
이제 드롭다운 목록인
select를
다루어 보겠습니다. 이들을 다루는 방법도 인풋이나
체크박스와 거의 다르지 않습니다.
다음과 같은 select가 있다고 가정해 봅시다:
function App() {
return <div>
<select>
<option>text1</option>
<option>text2</option>
<option>text3</option>
<option>text4</option>
</select>
</div>;
}
React의 기능을 이용해 이를 작동시켜 봅시다:
function App() {
const [value, setValue] = useState('');
function handleChange(event) {
setValue(event.target.value);
}
return <div>
<select value={value} onChange={handleChange}>
<option>text1</option>
<option>text2</option>
<option>text3</option>
<option>text4</option>
</select>
<p>
당신의 선택: {value}
</p>
</div>;
}
도시 목록이 있는 드롭다운 목록을 만드세요. 사용자의 선택을 출력할 단락도 함께 만드세요.
