[Vue.js] v-for 사용시 key 값으로 index를 사용하지 않는 이유

v-for 사용시 key값 사용하기

• 🚨 Vue 3에서는 <template v-for> 사용 시 key가 없으면 경고(warning)가 발생한다.
• 일반적인<div v-for>같은 경우에는 여전히 key 없이도 동작하지만, 사용을 권장한다고 한다.
• 또 다른 주의점은 v-for를 사용할 때 key 값으로 index를 사용하는 것은 몇 가지 문제를 일으킬 수 있다는 점이다.

 

key 값으로 index를 사용시 문제점

1. 컴포넌트 상태 유지 문제

Vue는 key를 기준으로 가상 DOM에서 요소를 식별하고 업데이트할지 여부를 결정한다. index를 key로 사용하면 배열이 변경될 때 예상치 못한 상태 유지 문제가 발생할 수 있다.

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <input v-model="item.value" />
    </li>
  </ul>
</template>

<script setup>
import { ref } from "vue";

const items = ref([
  { id: 1, value: "A" },
  { id: 2, value: "B" },
  { id: 3, value: "C" }
]);

// 첫 번째 요소를 제거하는 함수
const removeFirst = () => {
  items.value.shift();
};
</script>

• 첫 번째 요소 { id: 1, value: "A" }를 제거하면 id: 2와 id: 3이 한 칸씩 앞으로 이동한다.
• key가 index이므로 Vue는 기존 요소를 재사용하여 입력 필드의 value 값을 그대로 유지하려고 한다.
• 결과적으로 입력값이 꼬이면서 예상과 다른 동작을 하게 된다.

 

2. 리스트 변경 시 성능 문제

Vue는 key를 기준으로 DOM을 비교하고 업데이트 한다. index를 사용하면 리스트의 순서가 바뀔 때 불필요한 DOM 업데이트가 발생할 수 있다.

<template>
  <ul>
    <li v-for="(user, index) in users" :key="index">
      {{ user.name }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from "vue";

const users = ref([
  { name: "Alice" },
  { name: "Bob" },
  { name: "Charlie" }
]);

// 리스트 순서를 섞는 함수
const shuffleUsers = () => {
  users.value.sort(() => Math.random() - 0.5);
};
</script>

• index를 key로 사용하면 users 배열이 섞일 때 Vue는 기존 요소를 재사용하려고 한다.
• 하지만 요소의 내용이 달라졌으므로 불필요한 DOM 업데이트가 발생하고, 경우에 따라 UI가 올바르게 업데이트되지 않을 수 있다.

 

결론

index 대신 항목의 고유한 식별자(id) 를 key로 사용하는 것이 가장 좋은 방법이다.