Do not use Array index in keys lint 에러

Question

React로 dynamic list를 생성할 때 key 값으로 인덱스 값을 넣어줬는데 Do not use Array index in keys라는 linter 에러가 발생합니다. Linter를 끄기는 찝찝하고, 인덱스 외에는 딱히 사용하는 고유 id 값이 없는 상황인데 이런 경우에 보통 인덱스 지정을 어떻게 하시나요? 그리고 왜 인덱스 값을 key로 사용하면 안 되는지도 궁금합니다.

이은재 · Answer

안녕하세요.

우선 인덱스 값을 key로 지정하면 안되는 이유는 아래글을 읽어보시는 걸 추천드립니다.
https://blog.woolta.com/categories/1/posts/210
리액트 공식 문서에서 소개하고 있는 포스트도 참고하시면 좋을 것 같습니다.
https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318

해결 방법은 이상적으로는 위의 글에서 소개하는 대로 공유한 id를 생성해주는 라이브러리 등을 사용하거나 자체적으로 인덱스보다 복잡한 key를 생성할 수 있도록 코드를 수정해주는 게 가장 좋겠지만, 단순히 린터 에러만 피하고 싶으시다면 prefix-${index}처럼 간단한 prefix를 추가로 작성해주는 방식으로 에러를 피할 수 있긴 합니다. 질문자님의 상황을 고려하셔서 적당한 방법을 선택하시면 될 것 같아요.