목록 중 하나를 선택해야하는 폼을 만드는데, 그냥 쭉 리스트로 만들고 이벤트 핸들러로 해보려다가 여러가지 생각해야될게 많아져가주구 라디오를 활용해보기로 했다.
근데 요구사항내용 상 기본적으로 들어있는 동그라미를 없애야 돼서 어떻게 없애는지 찾아봤다.
그리고 value관리도 편하고, checked스타일도 지정하기 편해져서 좋은듯
css에서 처리
input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
border-radius: 0;
outline: none;
}
css에서 checked 가상요소로 여부 확인해 input태그 스타일 지정해줄 수 있다. 근데 나는 연산자써서 함
<input
type="radio"
value={item.name}
id={i}
checked={selectedFolder === item.name}
onChange={handleRadioChange}
/>