radio button checked 했을 때 두 번 클릭해야 바뀌는 문제

문제점

radio button으로 선택해야하는 항목이 필수값이라서 하나에는 checked를 넣어주었다.

<input
	id="mainFabric"
	type="radio"
	name="mainLabel"
	value="직조라벨"
	onChange={onChangeValues}
	checked
/>

그런데 이렇게 했을경우 checked 된 것 말고 다른 것을 선택할때 두번 클릭해야 하는 문제가 발생했다.
한번 바뀌고 난 다음에는 한번 클릭만으로 선택이 가능했다.

해결방법

useEffect로 처음에 default로 checked 되어야할 값을 그려주었다.
각 input의 id를 불러와서 그것을 checked = true로 바꿔주었다.

useEffect(() => {
    let mainFabric = document.getElementById("mainFabric");
    mainFabric.checked = true;
  }, []);

이렇게하니 원하는대로 하나는 체크되었고,
다른 버튼으로 변경할때도 한번에 잘 바뀌었다
😄