리액트에서 index를 key값으로 사용하면 안되는 이유

A

리액트는 key를 통해 리스트에서 어떤 요소가 변경, 추가, 삭제 되었는 지를 추적합니다.

따라서 key값이 달라지면 새로운 요소로 인식하여 불필요한 리렌더링이 발생할 수 있습니다.

 

만약 index로 key값을 설정하면, 리스트 중간 요소를 제거하거나, 리스트 요소의 순서가 변경될 때 등과같은 상황에서 잘못된 렌더링이 발생할 수 있습니다.

 

따라서 key는 db id와 같은 고유한 값이나 item.title과 같은 속성들을 결합해 유니크한 값을 사용합니다.

또한 uuid나 Math.random과 같이 동적으로 id를 생성하는 것도 렌더링 간 key가 일치하지 않아 부적합합니다.

 

참고자료 

[React] 배열의 index를 key로 쓰면 안되는 이유