리액트에서 배열을 렌더링할 때 key를 써야 하는 이유

1. 배열 안에는 여러 개의 요소가 있을 수 있다. 이 요소들이 각기 다른 key 값을 가지면, 리액트는 각 요소를 고유하게 식별할 수 있다. 이는 마치 친구들의 이름처럼 각 요소를 구분하는 역할을 한다.
2. 리액트는 배열의 요소가 바뀔 때, 어떤 요소가 추가되거나 삭제되었는지를 알아야 한다. key가 있으면 리액트는 변화가 생긴 부분만 빠르게 업데이트할 수 있는데 이는 성능을 향상시키고 불필요한 렌더링을 줄여준다.
3. 만약 배열의 요소가 이전과 같은 key를 가지고 있다면, 리액트는 그 요소의 상태(입력값, 클릭 상태 등)를 유지할 수 있다. 반면 key가 없거나 중복된다면, 상태가 잘못될 수 있다.
4. key가 없으면 리액트는 어떤 요소가 어떤 것인지 헷갈릴 수 있다. 이로 인해 렌더링 결과가 이상해질 수 있는데 각 요소를 정확하게 식별하기 위해서는 key가 필요하다.

//key가 없다면 리액트는 어떤 요소가 어떤 상태를 가지고 있었는지를 알기 어렵다.
[
  { id: 1, text: '사과', isChecked: false },
  { id: 1, text: '바나나', isChecked: false } // 중복된 key
]
//만약 사용자가 첫 번째 항목(사과)의 체크박스를 클릭하면, 
//리액트는 두 항목이 동일한 key를 가지고 있기 때문에 두 항목 모두 체크된 것으로 잘못 인식할 수 있다.

💡배열이 아니라 노드 / 컴포넌트에 key 값을 부여한다고 이해해도 괜찮다. 리액트 뿐만 아니라 뷰 등 대부분 프레임워크에서 key 값을 사용한다.