<option>

번역:송한종 이승효

The built-in browser <option> component lets you render an option inside a <select> box. 브라우저 빌트인 <option> 컴포넌트를 사용하면 <select> 박스 안에 옵션을 렌더링할 수 있습니다.

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

Reference참조
- <option>
Usage사용법
- Displaying a select box with options옵션이 있는 셀렉트 박스 표시하기

Reference참조

`<option>`

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

See more examples below. 아래에서 더 많은 예시를 확인하세요.

Props

<option> supports all common element props. <option> 은 모든 일반적인 엘리먼트 props를 지원합니다.

Additionally, <option> supports these props: 또한, <option>은 다음과 같은 props들을 지원합니다:

disabled: A boolean. If true, the option will not be selectable and will appear dimmed. disabled: boolean값. true 인 경우 옵션을 선택할 수 없으며 흐리게 보입니다.
label: A string. Specifies the meaning of the option. If not specified, the text inside the option is used. label: string값. 옵션의 의미를 지정합니다. 지정하지 않으면 옵션 내부의 텍스트가 사용됩니다.
value: The value to be used when submitting the parent <select> in a form if this option is selected. value: 폼에서 부모 요소인 <select>를 제출할 때, 이 옵션이 선택된 경우에 사용됩니다.

Caveats주의사항

React does not support the selected attribute on <option>. Instead, pass this option’s value to the parent <select defaultValue> for an uncontrolled select box, or <select value> for a controlled select. React는 <option>에서 selected 속성을 지원하지 않습니다. 대신 비제어 셀렉트 박스의 경우에는 <select defaultValue>로, 제어 셀렉트 박스의 경우에는 <select value>로, 이 옵션의 value를 부모에 전달하세요.

Usage사용법

Displaying a select box with options옵션이 있는 셀렉트 박스 표시하기

Render a <select> with a list of <option> components inside to display a select box. Give each <option> a value representing the data to be submitted with the form. <option> 컴포넌트 목록이 포함된 <select>을 렌더링하여 셀렉트 박스를 표시합니다. 각 <option>에 폼과 함께 제출할 데이터를 나타내는 value을 지정합니다.

Fork

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

Previous<input>

Next<progress>