React 에서 select 사용하기

셀렉트를 사용하기 위해 다음과 같이 jsx 구문을 만들었습니다.

<select className="w150" onChange={handleChangeSelect}>
  <option value="1" >0.1톤</option>
  <option value="2">0.2톤</option>
  <option value="3">0.3톤</option>
  <option value="4" selected={true}>0.4톤</option> {/* 선택하려던 부분! */}
  <option value="5">0.5톤</option>
</select>

 

기존 html 에서 디폴트 옵션을 선택하려면 option 태그안에 selected 속성을 주어 동작 하였습니다. 

하지만 리액트에서 이와 같이 사용하려고 한다면, 다음과 같은 에러를 뱉어냅니다.

React에서는 selected 대신 value를 사용합니다. 

또한 selected의 선택된 value 값을 가져오려면, onChange를 사용해야합니다.

위의 소스를 수정해 보면 이렇습니다.

 

<select className="w150" onChange={handleChangeSelect} value={'4'}>
  <option value="1" >0.1톤</option>
  <option value="2">0.2톤</option>
  <option value="3">0.3톤</option>
  <option value="4">0.4톤</option>
  <option value="5">0.5톤</option>
</select>

 

위의 내용으로도 소스를 적용하기 어렵다면 아래의 내용을 봐주세요!

export default function App() {
  const selectList = ["apple", "banana", "grape", "orange"];
  const [Selected, setSelected] = useState("");

  const handleSelect = (e) => {
    setSelected(e.target.value);
  };

  return (
    <div className="App">
      <h1>Select in React</h1>
      <div>
        <select onChange={handleSelect} value={Selected}>
          {selectList.map((item) => (
            <option value={item} key={item}>
              {item}
            </option>
          ))}
        </select>
        <hr />
        <p>
          Selected: <b>{Selected}</b>
        </p>
      </div>
    </div>
  );
}

 

Selected 는 선택된 option이 들어갑니다. 

onChange는 선택된 option의 value 값을 e.target.value 로 받은 후, Selected 에 setState 시켜줍니다. 

만약 처음부터 grape가 선택 된 채로 설정 하고 싶다면 Selected 부분에 default 값을 넣어주면 됩니다. 

const [Selected, setSelected] = useState("grape");