[메달 집계 관리] - React에서 Radio 버튼을 checked 하려면?

문제 상황

return (
  <div className="radio-button">
    <input
      type="radio"
      name="sorting"
      value={1}
      onClick={goldMedalLank}
      checked
    />{" "}
    금메달 수 기준
    <input type="radio" name="sorting" value={2} onClick={totalMedalLank} /> 총
    메달 수 기준
  </div>
);

페이지에 처음 들어왔을 때, 라디오 버튼이 이미 눌려진 상태를 만들고 싶었다.

그래서 '금메달 수 기준' 라디오 버튼에 checked 키워드를 넣어놨다.

 

hook.js:608
Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. Error Component Stack

🚨 그랬더니 콘솔창에서 경고 메시지가 떴다.

무엇이 문제인 것일까?

 

 

문제 원인

문제의 원인을 찾기 위해 열심히 검색해보았다.

✅ Input에서 radio를 사용할 때 onClick 핸들러를 제공하고, checked 키워드를 주면 해당 경고 메시지가 나온다고 한다.

 

 

해결 과정 및 결과

2가지의 방식이 있다.

1. checked 대신에 defalutChecked를 넣어준다.
2. onClick 핸들러 대신에 onChange 핸들러를 넣어준다.

 

나는 defalutChecked를 넣어주는 방식을 택하였다.

return (
  <div className="radio-button">
    <input
      type="radio"
      name="sorting"
      value={1}
      onClick={goldMedalLank}
      defaultChecked
    />{" "}
    금메달 수 기준
    <input
      type="radio"
      name="sorting"
      value={2}
      onClick={totalMedalLank}
    />{" "}
    총 메달 수 기준
  </div>
);

다음과 같이 코드를 작성하면 radio 버튼이 잘 동작하고 경고 메시지도 뜨지 않는다.

 

---

[참고자료]

https://sudo-minz.tistory.com/39