[React] Map함수의 Key를 왜 써야할까?

리액트를 경험했다면 아래와 같은 메세지를 무조건 한번은 경험했다고 생각한다.
map함수를 사용하지만 key값을 주지 않은경우 출력하는 메세지다.

🤔 key는 왜 필요할까❓

key props를 지정하지 않으면 페이지는 불필요한 랜더링을 진행한다.

어떻게 랜더링을 하길래❓

리액트는 내용이 바뀔 때 랜더링을 진행한다.
만약 key값이 있다면 리스트의 바뀐 부분만 랜더링을 진행한다.
만약 1000개의 리스트에서 1개만 바뀐 부분이 있다면 나머지 999개는 바꿀 필요가 없어 성능적으로 향상을 가져올 수 있다.

따라서 리액트는 key값으로 변한 내용인지 아닌지 구별하고 필요한 부분만 랜더링을 진행한다.

그러면 Key에 배열의 index를 넣으면 되겠네❓

종종 배열의 index를 넣는다.
😈절대로 좋은 방법이 아니다.

리액트 공식문서에서 이렇게 말한다.

인덱스를 key로 사용 중 배열이 재배열되면 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. 
컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용됩니다. 
인덱스를 key로 사용하면, 항목의 순서가 바뀌었을 때 key 또한 바뀔 것입니다.
그 결과로, 컴포넌트의 state가 엉망이 되거나 의도하지 않은 방식으로 바뀔 수도 있습니다.

index를 key로 사용하면 배열의 처음이나 중간에 새로 데이터가 삽입, 삭제될 시 그 부분만을 캐치하지 못한다.