[react-dom 번역] <option>

출처: https://react.dev/reference/react-dom/components/option

Reference

`<option>`

내장 브라우저 <option> 컴포넌트는 <select> 박스 안에 옵션을 렌더링할 수 있게 해줍니다.

<select>
  <option value="someOption">Some option</option>
  <option value="otherOption">Other option</option>
</select>

아래에서 더 많은 예시를 확인할 수 있습니다.

Props

<option>은 모든 공통 엘리먼트 props를 지원합니다.

추가적으로, <option>은 다음 props를 지원합니다:

disabled: boolean. true면 해당 옵션을 선택할 수 없고 흐리게 표시됩니다.
label: string. 옵션의 의미를 지정합니다. 지정하지 않으면 option 내부의 텍스트가 사용됩니다.
value: 이 옵션이 선택될 때 폼 제출 시 부모 <select>에 사용되는 값입니다.

Caveats(주의사항)

React는 <option>의 selected 속성을 지원하지 않습니다. 대신, 이 옵션의 value를 부모 <select defaultValue>(비제어 select) 또는 <select value>(제어형 select)에 전달하세요.

사용법

옵션이 있는 select 박스 표시

옵션 목록이 들어있는 <select>를 렌더링하면 select 박스를 표시할 수 있습니다. 각 <option>에 폼 제출 시 전송될 값을 나타내는 value를 지정하세요.

export default function FruitPicker() {
  return (
    <label>
      과일 선택:
      <select name="selectedFruit">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
      </select>
    </label>
  );
}