map & key props

map함수 적용시 key props를 부여하는 이유?

React에서 key는 어떤 항목을 변경할지 추가할지 삭제할지 식별할 수 있게 한다.

그래서 댓글배열에 map함수를 돌렸을때 key값을 주지않아 warning이 떴다.
처음에 나는 map의 두번째 인자인 index를 이용하여 데이터에 key값을 주려했다.

 {commentarray.map((e, index) => {
                       return <Comments text={e} key={index} />;
                       })}
                      

하지만 이는 좋은방법이 아니라는 것을 알게 되었다.
댓글이라는 것은 고유하지 않고 삭제 혹은 추가가 가능하다.

이렇듯 뒤바뀔 수 있는 항목들을 map의 index로 부여한다면
데이터가 변경될때마다 다시 렌더링 되고 map의 index가 0부터 다시 맵핑되며
이전에 삭제되었던 항목 자리에 엉뚱한 index가 자리하게 될 수 있기 때문이다.

key값으로는 고유한 값이 가장 좋다.

대표적인 예로는 데이터의 id값!

map의 index로 사용할 수 있는 경우는

배열의 요소가 절대불변할 경우에만 쓰도록!