[VUE] v-for key속성 사용하는 이유

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

List Rendering | Vue.js

Vue에서는 v-for를 사용할 경우 key 속성을 바인딩하도록 가이드 되어있다.

key속성을 바인딩 하는 이유에 대해 랜더링과 관련하여 알아보자.

[in place patch 전략]

VUE는 메모리를 최적하 하기위해 DOM을 재사용한다.

DOM이 바뀌어야할 부분만 처리하고 DOM을 재사용한다.

DOM 재사용 측면에서는 우수하나 문제을 일으킨다.

[이슈 : 배열의 랜더링]

랜더링한 배열의 순서가 바뀌면 in place patch전략을 사용하기 때문에 변경 부분만 patch를 하게된다.

변경된 부분에 한해서만 patch가 일어나니, 랜더링한 배열의 순서가 새로운 배열의 순새대로 랜더링이 일어나지 않는다.

[결론: 상태유지 key사용]

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

<template v-for="todo in todos" :key="todo.name">
  <li>{{ todo.name }}</li>
</template>

 * key값에는 index를 사용하지 않는다. key에 idnex를 사용하면 index는 요소에 속한 값이 아니고 랜더링에 따라 바뀌는 가변성있는 값이기 때문이다.

 

https://goodteacher.tistory.com/525

v-for와 key