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>

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>

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

Props

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

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

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을 지정합니다.

Read more about displaying a <select> with a list of <option> components. <option> 컴포넌트 목록과 함께 <select>표시하는 방법에 대해 자세히 알아보세요.

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>