[리액트 React] checkbox 하나만 선택되도록 하는 법 / How to make only one input checkbox checked

안녕하세요.

디자인도 하고, 개발도 하는 디발자 뚝딱입니다.

 

이번 포스팅에서는 리액트에서 input checkbox 하나만 선택되도록 하는 방법에 대해 공유하겠습니다.

I will share how to make only one input checkbox checked in React.

 

즉, 체크박스 중복선택을 막는 방법입니다.

설문조사 같은 페이지를 개발할 때 사용하면 유용합니다.

잊을만 하면 한번씩 쓰이는 기능이랍니다.

 

 

리액트에서 checkbox 하나만 선택되도록 하는 방법

• checkOnlyOne 함수를 유의해서 봐주세요.
• 체크된 value를 가져올 때 state를 사용했습니다.

import React, {useState} from "react";

export const Example = () => {
    const [checkValue, setCheckValue] = useState('사용');

    const checkOnlyOne = (e) => {
        let checkItem = document.getElementsByName("useType");
        Array.prototype.forEach.call(checkItem, function (el) {
        	el.checked = false;
        });
        e.target.checked = true;
        setCheckValue(e.target.defaultValue);
	};

    return (
        <>
            <input
                type="checkbox"
                id="use"
                name="useType"
                value="사용"
                onChange={(e) => checkOnlyOne(e)}
                checked={checkValue === "사용"}
            />
            <label htmlFor="use">사용</label>
            <input
                type="checkbox"
                id="unused"
                name="useType"
                value="사용 안함"
                onChange={(e) => checkOnlyOne(e)}
                checked={checkValue === "사용 안함"}
            />
            <label htmlFor="unused">사용 안함</label>
        </>
    )
}