map 함수 적용시 key props를 부여하는 이유

작성한 코드

<div className="reply">
	{comments.map((commentText) => {
		return (
			<Comment
				userName="wecodebootcamp"
				commentText={commentText}
			/>
		);
	})}
</div>

위와 같이 코드를 작성했을 때 정상인 것처럼 브라우저에는 렌더링되지만 Missing "key" prop for element in iterator 와 같은 warning message가 뜨고, 터미널에는 사진과 같이 컴파일되었지만 warning이 있다는 메세지가 뜬다!

여기서 코드를 다음과 같이 자식 컴포넌트인 에 key prop을 부여하면 정상적으로 컴파일되었다고 메세지가 나온다.

<div className="reply">
	{comments.map((commentText, index) => {
		return (
			<Comment
				key={index}
				userName="wecodebootcamp"
				commentText={commentText}
			/>
		);
	})}
</div>

Q. 왜 warning이 뜨고 왜 해결이 되었을까 ?

key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움.
안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정.
가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것.
대부분 데이터의 ID를 key로 사용.
공식문서에서 경험상 map() 함수 내부에 있는 엘리먼트에 key를 넣어 주는 게 좋습니다. 라고 한만큼 map 메서드 쓸때 무조건 key값 넣자구.
렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있음.

그렇지만 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장 x.
성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있음.

참고문서 https://ko.reactjs.org/docs/lists-and-keys.html