React 라디오 버튼 사용하기

프로젝트 진행중 카테고리에서 두개의 옵션중 하나만 셀렉할수있게 구현하고싶었다.
원래는 버튼으로 생성했으나 취지에 맞게 라디오 버튼으로 변경했다.

버튼으로 생성한 코드

function Write() {
  const [subCategoryId, setSubCategoryId] = useState(0);
  
  const domesticHandler = (e) => {
    e.preventDefault();
    setSubCategoryId(2);
  };
  const internationalHandler = (e) => {
    e.preventDefault();
    setSubCategoryId(3);
  };
    
  return
  <div>
	<button value={subCategoryId} onClick={domesticHandler}>
    	국내
    </button>
    <button value={subCategoryId} onClick={internationalHandler}>
        국외
    </button>
  </div>
}

두개의 버튼에 두가지 함수를 넣고 스테이트 값 변경을 주었다.

라디오로 생성한 코드

function Write() {
	const [subCategoryId, setSubCategoryId] = useState(0);
}

const categoryHandler = (e) => {
    setSubCategoryId(Number(e.target.value));
    console.log(subCategoryId);
  };
  
return (
	<label>
    	<input
           type="radio"
           value={2}
           onChange={categoryHandler}
           checked={subCategoryId == 2}
           />
            국내
    </label>
    <label>
        <input
           type="radio"
           value={3}
           onChange={categoryHandler}
           checked={subCategoryId == 3}
           />
            국외
    </label>
)

두개의 라디오 인풋에 value로 숫자를 줌으로써 원래 값을 변경해주는 함수 두개를 하나로 줄였다.