React에서 select의 value 속성

이제 option 태그에 value 속성이 있다고 가정해 봅시다:

function App() {
	return <div>
		<select>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
	</div>;
}

이 경우, value 속성이 존재하기 때문에 상태(state)에는 option 태그의 텍스트가 아닌 해당 속성의 값이 들어갑니다. 선택 결과를 단락에 출력하여 이를 확인할 수 있습니다:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={(event) => setValue(event.target.value)}>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
		<p>
			당신의 선택: {value}
		</p>
	</div>;
}

option의 텍스트와 그 값을 분리하는 것은 편리할 수 있습니다: 태그의 텍스트는 자유롭게 변경할 수 있으며, 스크립트에서 선택 결과는 변경되지 않는 value 속성 값에 따라 처리됩니다.

예시를 확인하세요:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={event => setValue(event.target.value)}>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
		<p>
			{value === '1' && '첫 번째 항목을 선택하셨습니다'}
			{value === '2' && '두 번째 항목을 선택하셨습니다'}
			{value === '3' && '세 번째 항목을 선택하셨습니다'}
		</p>
	</div>;
}

이제 option 태그의 텍스트를 변경해도 스크립트의 동작은 깨지지 않습니다. 왜냐하면 동작은 value 속성 값에 연결되어 있기 때문입니다.

드롭다운 목록을 사용하여 사용자가 속한 연령대를 선택하도록 제안하세요: 0세부터 12세, 13세부터 17세, 18세부터 25세, 또는 25세 이상.