[TIL] React에서 index를 key값으로 사용하면 안되는 이유

매일메일이라는 서비스를 이용해 TIL을 작성하려고 한다.

매일메일에서 질문을 받고 해당 질문에 대해 공부하는 방식이다.

매일메일은 기술면접 질문을 매일 메일로 보내주는 서비스이다. 혹시 서비스가 궁금할 수 있는 사람들을 위해 아래 링크를 첨부한다!

https://www.maeil-mail.kr/

 

오늘의 질문은 React에서 index를 key값으로 사용하면 안되는 이유에 대해 설명하는것이다.

 

Key

React 문서 key 설명

우선 key는 무엇일까 key는 위의 사진에도 나와있지만 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.

추가로 key에 왜 index를 값으로 사용하면 안되는지도 나와있다. 더 자세한 내용은 아래에서 이야기 하겠다.

 

Why?

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

배열의 요소들이 추가되거나 삭제될 때, 배열의 순서가 바뀌는 경우 문제가 발생하기 때문이다.

 

React는 key를 통해 리스트에서 어떤 요소가 변경, 추가, 삭제 되었는지를 추적한다. 그러나 index를 key로 사용하면

배열의 순서가 변경될 때 React가 요소들을 잘못 인식할 수 있다. 그리고 그 이유로 성능이 떨어질 수 있다.

 

예를 들어 배열에 새로운 요소가 추가되면 그 뒤에 있는 요소들의 index가 모두 바뀌게 되는데 React는 이를 새로운 요소로 인식해

불필요하게 재렌더링을 하거나, 요소의 상태를 잘못 처리할 수 있다.

 

이로 인해 앞서 말했듯이 성능 문제가 발생하거나 user가 입력한 요소가 의도치 않게 초기화 되는 등 예기치 않은 버그들이 생길 수 있다.

그래서 배열의 순서나 요소 변경에 영향을 받지 않는 고유한 값을 key로 사용하는 것이 좋다.