[React] map 함수에 key props를 부여하는 이유

📝 문제

{댓글.map(function (글) {
  return (
    <ul className="feedText">
    	<li className="idName">j00_00</li>
    	<li>{글}</li>
    </ul>
       	 );
})}

위의 코드는 map() 함수를 이용하여 댓글을 하나씩 반환하는 함수이다.

🔥💥 Warning: Each child in a list should have a unique "key" prop.

하지만, 에러가 발생했다!
여기서 우리는 중요한 key props에 대하여 알아봐야 한다.

🔑 key

key는 React가 어떤 아이템이 바뀌었는지, 혹은 추가되었는지, 혹은 삭제되었는지를 인식하는 데 도움을 준다. 요소에 안정적인 ID를 제공하려면 배열 내부 요소에 키를 주어야 한다.

또한, key는 unique한 값이어야 하므로 다른 항목들과 비교해서 반드시 고유하게 식별할 수 있는 값을 주어야 한다. 때문에 리스트에 있는 각각의 자식들은 독특한 key 속성값을 지녀야 한다.
대부분 데이터의 ID를 key로 사용한다.
하지만, 렌더링한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있다.

아래 코드는 고유의 key값을 주어 다시 작성해보았다.

{댓글.map(function (글) {
  return (
    <ul className="feedText" key={index}>
    	<li className="idName">j00_00</li>
    	<li>{글}</li>
    </ul>
       	 );
})}

참조 >
https://ko.reactjs.org/docs/lists-and-keys.html