배열의 index 와 key 의 관계

공식 문서 중 발췌

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

react 는 바뀐 document 를 비교해서 랜더링할때 변경내용을 적용한다.

반복해서 생성한 엘리먼트가 있다면 구분이 힘들기 때문에 구분을 위해 Key 를 사용해 구분해준다

이때 Key 값으로 배열의 인덱스로 적용 할 경우 배열의 길이가 변경될 때 배열의 인덱스는 변경되므로 Key 값으로 쓰는데 문제가 있다.

공식 문서에서 참고하라고 하는 블로그에서는 되도록 배열에서 고유한 값(ex: id) 을 활용하는 것을 추천하고 있다

※ 고유한 값을 만들어 쓰는 라이브러리도 추천했다.

예외적으로 아래 3가지의 내용에 부합한다면 사용해도 문제는 없다.

1. 목록과 항목은 정적이며 계산되지 않고 변경되지 않습니다.
2. 목록의 항목에는 ID가 없습니다.
3. 목록은 재정렬되거나 필터링되지 않습니다 .

한마디로 변경될 일이 없는 데이터에는 제한적으로 써도 된다는 의미로 보임

---

참고

https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318
https://ko.reactjs.org/docs/lists-and-keys.html