[error] next.js 에서 리렌더링으로 radio button 의 defaultChecked 속성이 무시됨.

radio 컴포넌트 제작 중 defaultChecked 속성이 적용되지 않는 것을 발견했다.

// app.js
<div>
	<Radio id="1" name="a" />
	<Radio id="2" name="a" defaultChecked />
</div>

name으로 라디오버튼들을 그루핑하고 defaultChecked 속성을 적용할 경우 초기 렌더링 시 checked 되었다가 name이 중복되는 요소들이 리렌더링되면서 checked 가 풀리는 현상이 발견되었다.

next에서 발생하는 문제로 예상되고 개발 상에서만 발견된다고 한다.

참고자료