Input radio 버튼

내용

input type='radio'인 버튼 클릭하기

코드

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

//name값을 받아와서 state를 변경해주는 함수
  const handleClickButton = buttonId => {
    setInputStatus(buttonId);
  };
  
return(
  				<input
                  name="first"
                  checked={
  //inputStatus가 name값인 first이면 true가 되면서 checked됨, 즉 상태와 정해준 이름이 같으면 true
                    inputStatus === 'first'}
//onClick을 하면 handleClickButton함수가 실행되면서 args로 name값인 first가 넘어간다
                  onClick={() => handleClickButton('first')}
                />
                <label For="radio">개별발송(준비중)</label>
                <input
                  name="second"
                  checked={inputStatus === 'second'}
                  onClick={() => handleClickButton('second')}
                />
                <label htmlFor="radio">대량발송(준비중)</label>
                <input
                  name="third"
                  checked={inputStatus === 'third'}
                  onClick={() => handleClickButton('third')}
                />
                <label htmlFor="radio">보관</label>
);

설명

<label HtmlFor='radio'> Radio </label>

• HtmlFor: 라디오 버튼과 연결해줌.
  연결하게 되면, 버튼말고 Radio라는 글을 클릭해도 라디오버튼이 동작하게 된다.
• 라디오버튼은 checked의 true/false에 따라 동작한다
• true/false로 라디오버튼의 상태를 관리하게 되면,
  라디오버튼의 갯수만큼 상태도 관리를 해야하기 때문에 함수의 인자로 input의 이름을 전달해 주는 방법이 효율적이다.
• state의 상태와 정해준 이름이 같으면 true가 되어서 불이 들어오는 원리
• 라디오 버튼은 체크박스와 달리 한가지만 선택되어질때 많이 사용함