WEB(FE)/React.js

[리액트] 라디오 토글 버튼 만들기

옛날에도 플러터로 라디오 토글버튼을 구현하는데 엄청 애먹었었는데 리액트로도 이걸 구현하는데 엄청 애먹어서 기록으로 남겨봅니다. 그 전에 우선 '라디오 토글 버튼'의 정의를 명확하게 하자면, 라디오버튼에 토글 기능을 넣은 버튼을 의미합니다. 기본적으로 라디오버튼은 반드시 하나가 선택되어 있어야 합니다. 저는 이미 선택된 라디오 버튼을 한번 더 선택하면 선택이 해제 되도록 만들고 싶었습니다. 기사 이상 산업기사 기능사 이렇게 구성하면 각 버튼은 토글 버튼인 동시에 같은 그룹 안의 컴포넌트끼리는 중복선택이 되지 않게 하려고 합니다. 영상으로 보면 이렇게 됩니다. 처음에는 각 버튼에 클릭 상태를 저장하는 변수를 만들고, 클릭할 때마다 상태를 바꿔주도록 했습니다. 처음에는 이 아이디어를 계속 끌고가면서 구현하려고..