들어가기 전에..

• 프로젝트들을 진행할 때 마다 자주 map사용시 key값을 지정하지 않아서 'Each child in a list should have a unique key prop.' 에러를 자주 만났다...
• 메인 프로젝트를 하는데 받은 데이터를 map를 사용하여 렌더링 시키는데 안일하게 index를 키로 썼는데, 처음엔 괜찮았지만, 리스트가 삭제돼고, 추가돼니 에러가 떴다.

map를 사용할 때 key를 쓰는 이유

• 리액트는 Virtual DOM 을 실제 DOM 과 비교하는 알고리즘을 통해 필요한 부분만 재렌더링 한다.
  그래서 각 Element들을 식별할 수 있는 고유한 식별자를 부여하는 것이 바로 key 의 역할이다.
• 즉, key는 배열의 어떤 원소에 변동이 있었는지 알아내고자 할 때 사용되는 것이다.
  따라서, 데이터가 가진 고유의 값을 key로 설정해야 한다.
• 대부분의 경우 데이터의 ID를 key로 사용

올바른 key 사용법

• map() 함수 내부에 element에 key값을 넣어준다.

<div className="main-content">
  {mainContentObj.map(( list ) => (
    <PostContent mainContentObj={list} key={list.id}/>
    ))}
</div>

• key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없다.
  즉 key는 형제 사이에서만 고유한 값이면 된다.

map를 사용할 때 key로 index를 쓰면 안되는 이유

• 각 요소의 식별을 위한 값이 바로 key 값
• index를 이용한 key값 부여에는 예상하지 못하는 오류가 생길 수 있다.
• key값은 고유해야 하는데, 배열이 중간에 삭제가 되는 경우 index값이 달라지기 때문에 성능 최적화할 때 문제가 발생할 수 있다.