[React] 리액트로 Radio태그 다루기

 

아래의 코드는 버튼을 클릭시 보여지는 값을 radio의 value로 설정하는 간단한 예제코드이다. 타입 스크립트로 작성되었으며, name으로 radio태그 선택을 설정하지 않고 checked에서 값을 비교하여 사용하였다. 

 

checked등 태그의 속성을 저런 방식으로 사용할 수도 있다는 것에 영감을 받아 기록하고자 코드를 남긴다.

function InputRadio(){
  const [radioVal, setRadioVal] = useState<string>();

  let handleClick = (e:React.ChangeEvent<HTMLInputElement>)=>{
    setRadioVal(e.target.value);
  }
  return(
    <>
      <p>선택된 항목 {radioVal}</p>
      1:<input type="radio" onChange={handleClick} value={"red"} checked={radioVal==="red"}/>
      2:<input type="radio" onChange={handleClick} value={"green"} checked={radioVal==="green"}/>  
      3:<input type="radio" onChange={handleClick} value={"blue"} checked={radioVal==="blue"}/>  
    </>
  )
}