프로젝트를 진행하면서 radio를 3개를 사용하는데, 3개중 하나를 기본값으로 입력되도록 설정하고 싶었다. 해당 페이지는 입력했던 값을 수정하는 페이지였기 때문에, 글을 작성했을 때 선택했던 radio의 값이 해당 페이지(수정 페이지)에서 자동으로 선택되어있어야 했다.
해당 기능은 checked 속성만 추가하면 될 줄 알았는데..ㅎ 그건 아니었고.. defaultChecked라는 속성을 추가해야 했다.
defaultChecked 속성 사용
나는 총 3가지의 radio중 하나만 선택되도록 할 것이다.
3가지의 값은 성별무관(0), 남자만(1), 여자만(2)이다.
useState를 사용하여 limitGender를 만들어주는데 기본값으로 아무것도 넣어주지 않는다. 백엔드에서 값을 받기 때문이다. (만약, 넘겨받는 값이 없다면 그냥 원하는 값으로 기본값을 넣어주면 된다.)
각 radio 값마다 부여해준 값(0,1,2)으로 변경하기 위해서 함수를 총 3개를 만들어주었다. (지금 생각해보면 이럴 필요 없이 하나로 하면 됐을 듯 하다.)
onClick 이벤트를 통해서 해당 input 부분이 클릭되면 선택한 값(0,1,2)으로 limitGender이 변경된다.
그리고 각 radio 태그마다 삼항연산자를 사용하여 defaultChecked를 부여해줬다. 값이 0이라면 0 radio 부분에 limitGender === 0 의 조건이 성립하므로 defaultChecked가 true가 된다.
이때, 다른 radio들은 조건이 성립하지 않으므로 빈 중괄호만 들어간다. (즉, defaultChecked 속성이 들어가지 않는다는 것)
Comments