Warning: Encountered two children with the same key,

 

MDN에서 해당 문제를 발견했다.

https://github.com/mdn/yari/issues/4227

A bug found: a particular paragraph is shown if language is changed from some languages to other languages · Issue #4227 · mdn

 

다음 동영상을 보면 언어 변환을 누른 뒤 브라우저의 뒤로 가기 앞으로 가기를 반복하면, Obsolete interfaces 가 중복되게 계속 나온다.

https://github.com/mdn/yari/issues/4227#issuecomment-881674861

A bug found: a particular paragraph is shown if language is changed from some languages to other languages · Issue #4227 · mdn

 

이유는.. html에서 id 값의 중복 때문이었다. html  파일로 작업을 하게 되는데 이때, html 파일 내부에서 id가 겹친 것이다. (대소문자 겹친 것도 포함된다.)

 

React is really strict on children having unique key attributes so any children with duplicate keys will throw an error.

 

리엑트는 또한, children이 고유의 키를 갖지 않는 것에 대해 엄격하다. 따라서 이런 오류가 나온 것이다.

 

해결법

https://github.com/mdn/yari/pull/4233

 

DOM으로 따지면, querySelectorAll로 해당 ID 값이 존재하는지 비교한 다음에 증가시킨다.

const dupl = document.querySelectorAll(${oldId});

즉, 해당 파일의 모든 id(lowercase)들과 비교해서 겹치면 뒤에 1씩 늘린다.

 

<h2 id="foo">FOO 1</h2>
<h2 id="foo">FOO 2</h2>
<h2 id="foo_2">FOO 2</h2>

to

<h2 id="foo">FOO 1</h2>
<!-- increment to foo_3 when foo_2 already exists (which doesn't make much sense in terms of heading order, but would fix the edge case -->
<h2 id="foo_3">FOO 2</h2>
<h2 id="foo_2">FOO 2</h2> <!-- Leave it since our check already noticed foo_2 exists -->

결론

id 중복을 없애기위한 여러 방안들을 배웠다.