Vue에서의 key 속성

Vue가 v-for 디렉티브로 렌더링된 요소 목록을 업데이트할 때, 기본적으로 "in-place" 업데이트 전략을 사용합니다. 배열이나 객체의 순서가 변경되더라도 Vue는 DOM 요소를 이동시키지 않고, 해당 인덱스에 맞는 새로운 데이터를 표시하도록 각 요소를 "제자리에서" 업데이트합니다.

Vue가 각 요소의 정체성을 어떻게 식별할지, 그리고 따라서 기존 요소를 재사용하고 재정렬할지 알려주기 위해서는, 각 요소에 고유한 key 속성을 지정해야 합니다.

키가 없으면 Vue는 요소 이동을 최소화하고 동일한 유형의 요소를 최대한 변경/재사용하려고 하는 알고리즘을 사용합니다. 키를 사용하면 요소는 키 순서의 변경에 따라 재정렬되며, 더 이상 존재하지 않는 키를 가진 요소는 항상 제거/소멸됩니다.

v-for와 함께 key 속성을 항상 지정하는 것이 권장됩니다. 단, 반복되는 DOM 내용이 단순하거나, 성능 향상을 위해 기본 업데이트 전략에 의도적으로 의존하는 경우는 예외입니다.

일반적으로 객체 배열을 반복할 때 키 추가 문제가 발생합니다. 이 경우 객체의 키 중 하나가 고유 필드, 예를 들어 id가 될 수 있습니다:

data() {
	return {
		users: [
			{
				id: 1,
				name: 'name1',
				surn: 'surn1',
			},
			{
				id: 2,
				name: 'name2',
				surn: 'surn2',
			},
			{
				id: 3,
				name: 'name3',
				surn: 'surn3',
			},
		]
	}
}

다음과 같이 해당 키를 지정하여 주어진 배열을 반복해 봅시다:

<template>
	<p v-for="user in users" :key="user.id">
		{{ user.name }}
		{{ user.surn }}
	</p>
</template>

다음 배열을 반복하고 ul 목록으로 제품 이름을 출력하세요:

data() {
	return {
		products: [
			{
				id: 1,
				name: 'product1',
			},
			{
				id: 2,
				name: 'product2',
			},
			{
				id: 3,
				name: 'product3',
			},
		]
	}
}