React 드롭다운 메뉴 구현 : 선택된 값 표시하기

 

드롭다운 메뉴에서 사용자가 선택한 값을 추적하고 화면에 표시하는 React 예제

---

코드설명

1. useState로 상태 선언

• selected라는 상태 변수와 이를 업데이트하는 setSelected함수 생성

2. onChange 이벤트 핸들러

• 드롭다운 메뉴에서 선택된 값을 감지하고 상태를 업데이트

3. 출력

• 선택된 값이 <p> 태그에 즉시 반영

---

 

사용예제

function SelectExample() {
  const [selected, setSelected] = useState("apple");

  const handleChange = (e) => setSelected(e.target.value);

  return (
    <div>
      <select value={selected} onChange={handleChange}>
        <option value="apple">사과</option>
        <option value="banana">바나나</option>
        <option value="cherry">체리</option>
      </select>
      <p>선택된 과일: {selected}</p>
    </div>
  );
}