리액트에서 하나만 선택되는 체크박스 구현 방법

여성, 남성 체크박스 중 하나만 선택돼야 하는 난관에 부딪혔다.

둘중에 하나만 선택이 되도록 하려면 어떻게 구현을 해야할까?

 

  const [ganderCheckValue, setGenderCheckValue] = useState('');

우선 useState로 변수를 선언해준다.

 

<input
    type='checkbox'
    id='man'
    name='checkOne'
    value='남성'
    onChange={(e) => genderCheck(e)}
/>
<label htmlFor='man'>남성</label>
<input
        type='checkbox'
        id='woman'
        name='checkOne'
        value='여성'
        onChange={(e) => genderCheck(e)}
/>
<label htmlFor='woman'>여성</label>

그리고 각각 input과 label로 구현을 해준다. 여기서 type, id, name, value, onChange를 적어주어야 하며 onChange에는 클릭할 때 서로 하나만 체크될 젠더 체크 함수가 들어갈 것이다.

 

function GendercheckOne(id) {

  let checkBox = document.getElementsByName('checkOne');
    // 'checkOne'라는 이름을 가진 모든 엘리먼트를 찾아 checkBox 저장
  
  Array.prototype.forEach.call(checkBox, function (el) {
    el.checked = false;
  });
    // checkBox에 대해 forEach를 사용하여 각 엘리먼트의 checked 속성을 false로 설정한다.

  id.target.checked = true;
    // 현재 이벤트가 발생한 엘리먼트(id.target)의 checked 속성을 true로 설정한다.

  setGenderCheckValue(id.target.defaultValue);
    // setGenderCheckValue 함수 호출, 이 함수는 id.target.defaultValue를 매개변수로 받는다.
}

 

이렇게 하면 어느 체크박스를 누르면 다른 체크박스는 해제되도록 구현이 가능하다.