<option>

소개

브라우저 내장 <option> 컴포넌트를 사용하면 <select> 박스 안에 옵션을 렌더링할 수 있어요.

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

<option>은 드롭다운 메뉴나 선택 박스에서 사용자가 선택할 수 있는 개별 항목을 나타내요. 각 옵션은 표시될 텍스트와 제출될 값을 가질 수 있어요!

---

목차

• 레퍼런스
  • <option>
• 사용법
  • 옵션이 있는 select 박스 표시하기

---

레퍼런스

<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: 문자열이에요. 옵션의 의미를 지정해요. 지정하지 않으면, 옵션 내부의 텍스트가 사용돼요.
• value: 이 옵션이 선택되었을 때 폼에서 부모 <select>를 제출할 때 사용될 값이에요.

주의사항

• React는 <option>의 selected 속성을 지원하지 않아요. 대신, 비제어 select 박스의 경우 이 옵션의 value를 부모 <select defaultValue>에 전달하고, 제어 select의 경우 <select value>에 전달하세요.

---

사용법

옵션이 있는 select 박스 표시하기

select 박스를 표시하려면 <option> 컴포넌트 목록이 있는 <select>를 렌더링하세요. 각 <option>에 폼과 함께 제출될 데이터를 나타내는 value를 지정하세요.

<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>
  );
}

select { margin: 5px; }

위 예시에서 사용자가 드롭다운에서 "Apple"을 선택하면, 폼이 제출될 때 selectedFruit 필드의 값은 "apple"이 될 거예요. 화면에는 "Apple"이라는 텍스트가 표시되지만, 실제로 서버로 전송되는 값은 value 속성에 지정된 "apple"이에요.

각 <option>은:

• 표시 텍스트: 사용자가 드롭다운에서 보는 내용 (태그 사이의 텍스트)
• value: 폼이 제출될 때 실제로 전송되는 값
• disabled: 선택 불가능하게 만들 수 있음

이렇게 표시되는 텍스트와 실제 값을 분리할 수 있어서 유용해요!

---

사이트맵

모든 문서 페이지 개요