React에서 List와 Key가 문제되는 경우

아래의 예제에서와 같이 map함수를 사용하여 리스트 형태로 render() 함수를 실행하면,
"Warning: Each child in a list should have a unique "key" prop."라는 오류메시지가 뜬다.

{this.props.comments.map((comment) => {
            return <Comments text={comment}></Comments>;
          })}

"key"란?

• “key”는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트
• key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움
• key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 함
• Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것임 ( 대부분의 경우 데이터의 ID를 key로 사용 )
• map 함수내에서 index 인자를 사용할 수도 있지만, 가급적 지양(리스트의 순서가 바뀌는 경우 성능저하 유발)
• key 넣는 위치는 map() 함수 내부에 있는 엘리먼트에 key를 넣어 주는 게 좋음