React의 key가 없을 때 배열의 모든 컴포넌트가 재평가되지는 않습니다.
리액트에서 배열의 변경사항을 감지하고 렌더링하는 방식
리액트에서 배열을 사용해서 컴포넌트를 렌더링한다면 리액트는 배열을 순회하면서 요소를 생성하고 반환합니다.
이때 배열에 변경사항이 생겼을 때 리액트는 Virtual DOM과 현재의 배열을 비교하며 변경사항을 확인합니다.
예를 들어 [1,2,3,4,5] 라는 배열이 있을 때, 3을 삭제한다면 리액트는 [1,2,4,5]배열을 순회하면서 비교하게 되는데, [1,2]까지는 기존의 첫번째 두번째 요소와 같지만 [4,5]는 네번째 [3,4]와 다르기 때문에 재조정 과정을 진행합니다.
만약 첫번째 값이 삭제되었다면 배열의 모든 요소를 리렌더링 해야 하는데, 배열 내 모든 요소를 리렌더링하는 것은 효율적이지 않으며, 배열 내부의 값을 비교하기 위해 배열의 모든 값을 확인하면서 변경사항을 체크하는 것도 효율적이지 않습니다.
때문에 리액트는 key를 통해서 배열 내에 어떤 요소가 변경되었는지를 판단하는데, key값이 존재하지 않으면 자동으로 배열의 index를 key값으로 설정합니다.
index를 key값으로 사용할 때의 문제점
이때 배열의 index를 key값으로 사용할 때의 문제점이 발생하는데, 배열의 순서가 바뀌거나 값이 추가/삭제되는 경우 index가 변경될 수 있습니다.
예를 들어 [1,2,3,4,5] 라는 배열이 있을 때, 3을 삭제한다면 리액트는 index가 [0,1,3,4]가 아닌 [0,1,2,3]으로 변경되어 5가 변경되었다고 판단하게 됩니다.
Math.random()을 key값으로 사용할 때의 문제점
또한 key값을 Math.random() 과 같이 매번 변경되는 것을 사용하면 안되는 이유도 이와 같은데, 키를 확인하는 과정에서 key가 매번 변경되기 때문에 배열의 모든 요소가 변경되었다고 판단하여 모든 요소를 재생성하는 효율적이지 않는 동작을 하게 됩니다.
자료 출처
https://ko.react.dev/learn/rendering-lists#why-does-react-need-keys---