map 함수 사용시 key props를 왜 부여하나요?

tl;dr

구성 요소 목록을 렌더링 할 때, React는 element 목록에서 각 element가 어떤 것인지 확실히 알고 싶어 한다.

• React는 어떤 요소가 새로운지, 어떤 요소가 이전 렌더에 있었는지 확실히 알고 싶어한다.
• key 사용의 주 목표는 각 요소들의 identity 를 확인하기 위함이다.

comments: [
  {
    id: 1,
    userName: 'sehapark',
    content: '안녕',
  },
  {
    id: 2,
    userName: 'parkyun',
    content: '하세요',
  },
]

const [feedComments, setFeedComments] = useState(comments);

<ul className="feed-comment-list">
  {comments.map(comment => (
    <CommentList
      key={comment.id}
      comment={comment}
      onDeleteButtonClick={onDeleteButtonClick}
     />
  ))}
</ul>

그런데 array의 index값으로 주면 안되요?

function renderItem(n, index) {
  return(
    <h1 key = {index} onClick = {() => deleteItem(index)}>
      {n.value}
    </h1>
    )
}

index로 접근하면 각각의 key값들이 배열에 종속되어 버리기 때문에 안된다.

index 값이 바뀌면서 전체 key가 바뀌어 모두 재 렌더 되는 모습.

하지만, 따로 id에서 관리 한다면 각각 종속되지 않는다.

function renderItem(n) {
  return(
    <h1 key = {n.id} onClick = {() => deleteItem(n.id)}>
      {n.value}
    </h1>
    )
}

key를 따로 주어서 각각 요소들 전부다 변하지 않는다.