[React] Radio Button - 라디오버튼

2020/09/27

기능들을 구현하면서, 간단한 것들이라도 기록하기 위해서 블로그를 작성해야겠다고 생각이 들어서

아주 간단한 라디오버튼으로 시작을 해보려고 합니다.

라디오 버튼은 html의 input 태그의 type='radio'를 통해서 간단하게 불러올 수 있습니다.

<RadioBtn type='radio' id='radio' />
<label htmlFor='radio'>Radio</label>

RadioBtn은 styled-components를 사용해서 만들었습니다.(실제로는 Input태그)

type을 radio로 지정해주고, <label>Radio</label> label 태그를 이용하여 버튼의 이름도 만들어줍니다.

input 태그의 id와 label 태그의 htmlFor속성을 이용하여 라디오버튼과 연결을 해줍니다.

연결을 하게되면, 버튼말고 Radio라는 글을 클릭해도 라디오버튼이 동작하게 됩니다.

const [ inputStatus, setInputStatus ] = useState(false)

const handleClickRadioButton = () => {
  setInputStatus(!inputStatus)
}

<RadioBtn 
  type='radio' 
  id='radio' 
  checked={inputStatus} 
  onClick={handleClickRadioButton} />
<label htmlFor='radio'>Radio</label>

라디오버튼은 checked의 ture/false 에 따라 동작을 합니다.

handleClickRadioButton 함수를 통해서 라디오버튼을 동작할 수 있게 되었지만,

true / false로 라디오버튼의 상태를 관리하게 된다면, 라디오버튼의 갯수만큼 상태도 관리를 해야겠죠..

저는 그래서 함수의 인자로 input의 이름을 전달해 주는 방법을 생각했습니다.

const [ inputStatus, setInputStatus ] = useState('')

const handleClickRadioButton = (radioBtnName) => {
  setInputStatus(radioBtnName)
}

<RadioBtn 
  type='radio' 
  id='radio' 
  checked={inputStatus === 'radio'} 
  onClick={() => handleClickRadioButton('radio')} />
<label htmlFor='radio'>Radio</label>