<select>태그는 drop-down목록을 보여주기 위한 HTML 태그입니다. drop-down목록은 여러가지 옵션들중에서 하나를 선택 할 수 있는 기능을 제공합니다. HTML에서는 아래 코드와 같이 <option>태그들을 <select>태그가 감싸는 형태로 사용합니다.

<select>
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
    <option selected value="grape">포도</option>
    <option value="watermelon">수박</option>
</select>

<option>태그에서 현재 선택된 옵션의 경우에는 selected라는 속성을 갖고 있습니다. 코드를 보면 grape에 selected속성이 들어가 있는 것을 볼 수 있습니다. 현재 포도가 선택되어 있는 상태라는 것을 알 수 있습니다. 리액트에서는 <option>태그에 selected 속성을 사용하지 않고, 대신 <select>태그에 value라는 속성을 사용하여 값을 표시합니다. 아래 예시 코드를 한 번 보도록 하겠습니다.

function FruitSelect(props) {
    const [value, setValue] = useState('grape');

    const handleChange = (event) => {
        setValue(event.target.value);
    }

    const handleSubmit = (event) => {
        alert('선택한 과일: ' + value);
        event.preventDefault();
    }

    return (
        <form onSubmit={handleSubmit}>
            <label>
                과일을 선택하세요:
                <select value={value} onChange={handleChange}>
                    <option value="apple">사과</option>
                    <option value="banana">바나나</option>
                    <option value="grape">포도</option>
                    <option value="watermelon">수박</option>
                </select>
            </label>
            <button type="submit">제출</button>
        </form>
    )
}

위 코드에는 FruitSelect라는 컴포넌트가 있고, 이 컴포넌트의 state로는 grape라는 초기값을 가진 value가 하나 있습니다. 그리고 이 값을 <select>태그에 value로 넣어주고 있습니다. 값이 변경된 경우에는 위에서와 마찬가지로 handleChange()함수에서 setValue()함수를 사용해 값을 업데이트 합니다. 이 방식을 사용하게 되면 사용자가 옵션을 선택 했을 때, value라는 하나의 값만을 업데이트 하면 되기 때문에 더 편리합니다.

만약 목록에서 다중으로 선택이 되도록 하려면 아래와 같이 multiple이라는 속성의 값을 true로 하고, value로 선택된 옵션들의 값이 들어있는 배열을 넣어주면 됩니다.

<select multiple={true} value={['B', 'C']}>

지금까지 살펴본 것처럼 <input type="text">태그, <textarea>태그, 그리고 <select>태그들을 Controlled Component로 만드는 방식은 모두 비슷합니다. 모두 value라는 속성을 통해서 값을 전달하고, 값을 변경할 때는 onChange에서 setValue()함수를 사용해 값을 업데이트 합니다. 이러한 방식은 실제로 사용자 입력을 받는 컴포넌트를 만들 때 사용하기 때문에 잘 기억하기 바랍니다.