<option>

01무엇

<option>은 <select> 드롭다운 안에 놓이는 하나의 선택지다. 브라우저 기본 요소를 그대로 렌더한다.

<select>(또는 <optgroup>) 안에서만 의미가 있다. 각 항목에 value를 주고, 화면에 보일 글자는 자식으로 넣는다.

<select name="fruit">
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
</select>

02무슨 일이 일어나나

value는 그 항목이 선택됐을 때 폼으로 제출되는 값이다. 자식 텍스트는 사용자에게 보이는 라벨이고, label prop을 따로 주면 그쪽이 쓰인다.

주의할 점은 하나다. React는 <option>의 selected 속성을 지원하지 않는다. 어느 항목이 선택됐는지는 개별 <option>이 아니라 부모 <select>가 정한다 — 비제어면 <select defaultValue>, 제어면 <select value>. 선택 상태를 한 곳(부모)에서 일관되게 관리하기 위해서다.

03사용법

초기 선택은 부모 <select>의 defaultValue가 가리키는 value로 정해진다.

export function FruitPicker() {
  return (
    <select name="fruit" defaultValue="banana">
      <option value="apple">사과</option>
      <option value="banana">바나나</option>
      <option value="orange">오렌지</option>
    </select>
  )
}

고를 수 없는 항목은 disabled로 흐리게 둔다. 안내용 자리 표시(placeholder) 항목에 자주 쓴다.

<select defaultValue="">
  <option value="" disabled>
    선택하세요
  </option>
  <option value="apple">사과</option>
</select>

04실무 예시

배열을 돌려 항목을 만드는 흔한 형태다. 각 <option>에는 key와 value를 준다.

const fruits = [
  { id: 'apple', name: '사과' },
  { id: 'banana', name: '바나나' },
]

export function FruitPicker() {
  return (
    <select name="fruit" defaultValue="apple">
      {fruits.map((f) => (
        <option key={f.id} value={f.id}>
          {f.name}
        </option>
      ))}
    </select>
  )
}

05왜 중요한가

<option> 자체는 단순하다. 실무에서 걸리는 건 선택을 어디서 정하느냐인데, 그 답은 항상 부모 <select>다. 이 규칙만 손에 익으면 드롭다운을 다룰 때 헤맬 일이 거의 없다. <select> 문서와 함께 보면 그림이 완성된다.

Reference