[react] map 사용시 key값 작성

React에서 map 함수 사용 시 key값을 부여하는 이유

Key

key는 react가 항목을 변경 , 추가 또는 삭제할지 식별하는 것을 돕는다.

key는 element에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정한다.

<script>
const dummyList = [
  {
    id: 1,
    author: "yong",
    content: "Happy coding",
    emotion: 5,
  }
  
  {diaryList.map((it) => (
          <DiaryItem key={it.id} {...it} />
        ))}
</script>

key 값은 고유하게 식별할 수 있는 것을 사용해야한다.

고유한 key 값이 없다면 index 값을 key 값으로 사용할 수 있다.

<script>
{diaryList.map((it, idx) => (
          <DiaryItem key={idx} {...it} />
        ))}
</script>

하지만 이렇게 배열의 index를 사용하게되면 우리가 요소를 추가 , 삭제 ,수정 등을 하게 되면서
요소들의 순서가 바뀌게 되면 react내에서 문제가 발생할 수도 있다.