array.map() method에서 key값을 부여하는 이유

댓글 컴포넌트화 작업을 하던 중,
array.map 메서드를 사용했는데 이런 오류가 나타났다.

오류 내용은 뭘까?

"Missing "key" prop for element in iterator"
=> 반복자 안 요소에 key prop이 사라졌다.

key값을 부여하라는 의미이다.

공식 문서에 따르면 key는

"엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트입니다.
key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다
key는 element에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
대부분의 경우 데이터의 ID를 key로 사용합니다.

즉 map 메서드를 사용하면서 반복 생성되는 항목에 대해 고유한 값을 부여하여
해당 element를 생성할 때 뿐 아니라 삭제, 또는 수정 등을 할 때 key값에 해당하는 정확한 요소를 찝어 요청을 수행하는데 도움을 줄 수 있기 때문이다.

예를 들어 key값이 없다면 어떤 함수를 실행했을 때 (js의 경우) document.querySelector("")로 접근한 className이 동일하다면 어느 요소에서 요청을 실행해야 할지 식별할 수 없으며, 또한 그렇게 되면 개발자의 의도대로가 아닌 임의의 값에서 함수가 실행될 수 있기 때문이다.