Portfolio

브라우저 빌트인 <select> 컴포넌트로 옵션들과 함께 셀렉트 박스를 렌더링할 수 있습니다.


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

참조

<select>

사용법

참조

`<select>`

셀렉트 박스를 표시하려면, 브라우저 빌트인 <select> 컴포넌트를 렌더링하세요.


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

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

Props

<select>는 모든 공통 엘리먼트의 props를 지원합니다.

value prop을 전달함으로써 이를 제어 컴포넌트가 되게 할 수 있습니다:

value: 문자열(혹은 multiple={true}일 경우 문자열로 구성된 배열). 어떤 옵션이 선택되는지를 제어합니다. 각 문자열 값은 <select> 안에 있는 <option>들의 value와 일치합니다.

value를 전달할 때는 전달된 value를 업데이트 하는 onChange 핸들러도 함께 전달해야 합니다.

<select>가 비제어 컴포넌트인 경우에는, 대신 defaultValue를 전달할 수 있습니다:

defaultValue: 문자열(혹은 multiple={true}일 경우 문자열로 구성된 배열). 초기 선택값을 지정합니다.

다음 <select> prop들은 비제어 및 제어 컴포넌트 모두에 영향을 미칩니다:

autoComplete: 문자열. 가능한 자동 완성 동작을 지정합니다.

autoFocus: 불리언. true일 경우 마운트시 엘리먼트에 초점이 맞춰집니다.

children: <select> 는 <option>, <optgroup>, <datalist> 컴포넌트를 자식으로 받습니다. 최종적으로 위 허용된 컴포넌트들 중 하나(<option>, <optgroup, <datalist>)를 렌더링하는 컴포넌트도 괜찮습니다. option 태그들을 렌더링하는 컴포넌트의 경우, 각 <option>에는 반드시 value가 있어야 합니다.

disabled: 불리언. true일 경우, 입력이 비활성화되고 흐릿하게 표시됩니다.

form: 문자열. 이 셀렉트 박스가 속한 <form>의 id를 지정합니다. 생략하면 가장 가까운 상위 form이 됩니다.

multiple: 불리언. true일 경우, 여러 옵션을 선택할 수 있습니다.

name: 문자열. 폼 제출시 해당 셀렉트 박스의 이름을 지정합니다.

onChange: 이벤트 핸들러. 제어 컴포넌트로 사용할 때 필요합니다. 사용자가 다른 옵션을 선택하는 즉시 실행됩니다. 브라우저의 input event처럼 동작합니다.

onChangeCapture: A version of onChange that fires in the capture phase.onChangeCapture: 캡쳐 단계에 실행되는 버전의 onChange입니다.

onInput: 이벤트 핸들러. 사용자에 의해 값이 변결될 때마다 실행됩니다. 역사적인 이유로 React에서는 일반적으로 비슷하게 작동하는 onChange를 대신 사용합니다.

onInputCapture: 캡쳐 단계에 실행되는 버전의 onInput입니다.

onInvalid: 이벤트 핸들러. 폼 제출시 유효성 검사에 실패하면 발생합니다. 빌트인 invalid 이벤트와는 달리, React onInvalid 이벤트는 버블이 발생합니다.

onInvalidCapture: 캡쳐 단계에 실행되는 버전의 onInvalid입니다.

required: 불리언. true일 경우 form 제출시 값이 있어야 합니다.

size: 숫자. multiple={true}인 경우 초기에 보여줄 항목 수를 지정합니다.

주의사항

HTML과 달리, <option>에 selected 속성을 전달하는 것은 지원되지 않습니다. 대신, 비제어 컴포넌트의 경우 <select defaultValue>를, 제어 컴포넌트의 경우 <select value>를 사용하세요.

문자열 value prop을 제공하면 제어 컴포넌트로 취급됩니다.

제어 컴포넌트이면서 동시에 비제어 컴포넌트일 수는 없습니다.

생명주기 동안 제어 컴포넌트와 비제어 컴포넌트 사이를 전환할 수 없습니다.

제어컴포넌트는 값을 동기적으로 업데이트 하는 onChange 이벤트 핸들러가 필요합니다.

사용법

option들과 함께 셀렉트 박스 표시하기

셀렉트 박스를 표시하려면 <option> 컴포넌트 목록을 <select> 안에 넣어 렌더하세요. 각 <option>에는 폼 제출시 데이터가 될 value가 있어야 합니다.

셀렉트 박스에 label 제공하기

흔히 <select>를 <label> 태그 안에 위치시킵니다. 이렇게 하면 해당 label이 셀렉트 박스와 연결되어 있음을 의미하게 됩니다. 사용자가 label을 클릭하면 브라우저가 셀렉트 박스에 초점을 맞춥니다. 스크린 리더는 사용자가 셀렉트 박스에 초점을 맞추면 label 캡션을 읽어주므로, 접근성을 위해서도 이렇게 하는 것이 필수적입니다.

<select>를 <label>에 넣을 수 없는 경우에는, <select id>와 <label htmlFor>에 동일한 ID를 전달하여 연결하세요. 한 컴포넌트에서 여러 인스턴스간의 충돌을 피하기 위해서는 다음과 같이 useId로 ID를 생성하세요.

초기 선택 옵션 제공하기

기본적으로 브라우저는 첫번째 <option>을 기본값으로 선택합니다. 만약 다른 옵션을 기본값으로 선택하고 싶다면, 해당 <option>의 value를 <select>의 defaultValue로 전달하세요.

Pitfall | 함정

HTML과 달리, 개별 <option>에 selected 속성을 전달하는 것은 지원되지 않습니다.

다중 선택 활성화하기

다중 선택을 활성화하려면 <select>에 multiple={true}를 전달하세요. 이 경우 만약 defaultValue를 지정하려면 이 값은 초기 선택 옵션들로 구성된 배열이어야 합니다.

form 제출시 셀렉트 박스 값 읽기

셀렉트 박스를 <form>으로 감싸고, form 안에 <button type="submit">을 넣으세요. 그러면 <form onSubmit> 이벤트 핸들러가 호출됩니다. 기본적으로 브라우저는 form 데이터를 현재 URL로 전송하고 페이지를 새로고침 합니다. e.preventDefault()를 호출하여 이 동작을 재정의할 수 있습니다. form 데이터를 읽으려면 new FormData(e.target)를 사용하세요.

Note

<select name="selectedFruit" />과 같이 <select>에 name를 지정하세요. 이렇게 지정한 name은 { selectedFruit: "orange" }와 같이 form 데이터의 키로 사용될 것입니다.

<select multiple={true}>의 경우, FormData에는 선택된 값들이 각각 이름-값 쌍으로 분리되어 들어갑니다. 위 예시의 콘솔 로그를 자세히 살펴보세요.

Pitfall | 함정

기본적으로 <form> 안의 어떠한 <button>이든 클릭하면 브라우저는 이를 제출 요청으로 인식합니다. 이러한 동작이 당황스러울 수 있습니다! 사용자정의 Button React 컴포넌트를 사용하고 있다면 <button> 대신 <button type="button">로 작성하는 것을 고려하세요. 다음 form 제출 버튼에는 <button type="submit">`을 명확하게 표시하세요.

state 변수를 사용하여 셀렉트 박스 제어하기

<select />는 기본적으로 비제어 컴포넌트입니다. <select defaultValue="orange" />와 같이 초기 선택값을 전달하더라도, JSX는 초기값만을 지정할 뿐, 현재값은 지정하지 않습니다.

제어 컴포넌트로 렌더링하기 위해서는 value prop을 전달하세요. React는 셀렉트 박스가 항상 전달한 value를 갖도록 강제합니다. 일반적으로 state 변수로 셀렉트 박스를 제어합니다.


function FruitPicker() {
  const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare a state variable...
  // ...
  return (
    <select
      value={selectedFruit} // ...force the select's value to match the state variable...
      onChange={e => setSelectedFruit(e.target.value)} // ... and update the state variable on any change!
    >
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="orange">Orange</option>
    </select>
  );
}

이는 선택시마다 UI의 일부를 다시 렌더링하려는 경우에 유용합니다.

Pitfall | 함정

onChange 없이 value만 전달하면 옵션을 선택할 수 없습니다. 셀렉트 박스에 value를 전달하여 제어하면 항상 전달한 값을 갖도록 강제합니다. 따라서 state 변수를 value로 전달했지만 onChange 이벤트 핸들러에서 해당 상태 변수를 동기적으로 업데이트 하는 것을 잊어버리면, React는 옵션 선택시마다 셀렉트 박스를 지정한 value으로 되돌립니다.

HTML과 달리, 개별 <option>에 selected 속성을 전달하는 것은 지원되지 않습니다.