React에서 select의 value 속성

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

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

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

jsxfunction 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 속성 값에 따라 처리됩니다.

예시를 확인하세요:

jsxfunction 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 속성 값에 연결되어 있기 때문입니다.