[VueJS] 리스트 렌더링(v-for) 에서 key를 사용하는 이유

v-for에서 key를 사용하는 이유는 뭘까?

우선 key의 역할은 반복되는 내용을 하나로 관리하기 위해 사용되는 유니크한 값이다.
그 유니크한 값이 새 노드 목록을 이전 목록과 비교하기 위한 힌트로 제공된다.

좀 더 자세히 알아보기 위해 공식문서에서의 설명을 한번 살펴보자.

Vue가 v-for로 렌더링 된 요소 목록을 업데이트할 때 기본적으로 "in-place patch" 전략을 사용합니다. 데이터 항목의 순서가 변경된 경우 항목의 순서와 일치하도록 DOM 요소를 이동하는 대신 Vue는 각 요소를 제자리에 패치하고 특정 인덱스에서 렌더링 되어야 하는 항목을 반영하는지 확인합니다.

이 기본 모드는 효율적이지만 목록 렌더링 출력이 하위 구성 요소 상태 또는 임시 DOM 상태(예: 양식 입력 값)에 의존하지 않는 경우에만 적합합니다.

Vue가 각 노드의 ID를 추적하고 기존 요소를 재사용하고 재정렬할 수 있도록 힌트를 제공하려면 각 항목에 대해 고유한 키 속성을 제공해야 합니다.

(* 구글번역으로 돌린 거라 말이 살짝 안 맞을 수 있다...)

뭐 설명만 보고는 정학히 무슨 말인지는 모르겠으나,
쉽게 말하면 "in-place path" 전략은 DOM에서 바뀌어야 할 부분만 수정하고 나서 나머지 DOM을 재사용한다는 의미이다.
그리고 이는 굉장히 효율적인 전략이지만 임시 DOM 상태와 같이 사용할 경우 임시 DOM 상태는 위치가 그대로인데, 배열 내에서 변경된 것들만 위치가 바뀌는 현상이 발생한다고 한다.

이 부분에 대해서는 만약 글만으로 이해가 안된다면 아래 글을 링크해 둘 테니 한번 참고해 보길 바란다.
실제로 테스트를 해보면서 확인한 블로그 게시글이 있기에 링크를 달아둔다.
https://goodteacher.tistory.com/525

v-for와 key

그리고 이는 key에 고유한 값을 사용해야만 하며 index를 사용해서는 안된다라는 의미 이기도 하다.
어떻게 그런 결론이 나오냐면,
key에 index를 사용하면 위에서 설명한 것 처럼 key를 사용하지 않은 것과 별 차이가 없기 때문이다.

key로 고유한 값을 사용해야만 하는 이유, 그리고 key를 사용해야 하는 이유에 대해 자세한 글은 아래 링크를 통해 살펴보는 것을 추천한다.
https://vueschool.io/articles/vuejs-tutorials/tips-and-gotchas-for-using-key-with-v-for-in-vue-js-3/

Tips and Gotchas for Using key with v-for in Vue.js 3 - Vue School Blog

나 역시 지금까지 key의 역할은 그냥 지우거나, 변경하거나, 추가하거나 할 때 식별하는 용도로만 사용하는 줄 알았었는데,
이렇게까지 자세한 이유는 몰랐던 참이다.

그리고 재미난 실험 글이 하나 더 있는데, 이는 key의 사용 여부가 성능에 어떠한 영향을 미치는가에 대한 실험이다.
이 글도 흥미로우니 한번 살펴보는 것을 추천한다.
https://kamang-it.tistory.com/631

[Web][Performance][Vue] v-for과 key, 그리고 성능사이의 관계

자 그래서 결론은 그냥 묻지도 따지지도 말고 고유한 값으로 key를 설정해 주도록 하라는 의미이다.
이왕 쓰는거 알고쓰면 더 좋을 거 같으니 대략적으로나마 알아두고 넘어가자.

---

참고: https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key

List Rendering | Vue.js

참고: https://vuejs.org/api/built-in-special-attributes.html#key

Built-in Special Attributes | Vue.js