v-for

v-for는 아마 v-if와 함께 템플릿에서 가장 많이 쓰게될 디렉티브이므로,

한번 알아둘때, 잘 알아두는것이 좋습니다!

우선, v-for는 말 그대로 반복을 의미합니다.

예를들어, 스크립트에 아래와 같은 배열이 있다고 가정합시다.

data: vm => ({
  cardList: [
    {text:'보석1', value:1},
    {text:'보석2', value:2},
    {text:'보석3', value:3},
    {text:'보석4', value:4},
  ]
})

이것을 템플릿에 바인딩하기위해, v-for를 사용할수 있습니다.

<div v-for="(item, index) in cardList">{{item.text}}</div>

대충 예상이 되시나요? 아래와 같이 렌더링되어야할겁니다!

<div>보석1</div>
<div>보석2</div>
<div>보석3</div>
<div>보석4</div>

하지만 자바스크립트 콘솔에서는 key 어쩌고 저쩌고하는 에러, 혹은 경고를 뿜어낼것입니다.

처음 리스트를 반복해서 렌더링할때는 문제없지만,

배열이 변경될때, key값은 어떤 배열이 변경됐는지 계산하기위한 속성으로 사용하기때문에,

update를 위해 지정해주는것이 좋습니다. 그러므로 키는 각 배열에서 고유한값으로 지정해주는것이 좋습니다.

중복된 키가 존재하면, 배열이 변경되고 dom변경시 예상하지못한 결과가 나올수있겠죠.

물론 콘솔에 에러를 보기싫은것도 당연하고요!

그런데 중요한점은, v-for를 사용할때 key값으로 index를 사용하면 안됩니다.

고유한값이긴하지만, 그냥 순서번호일뿐이에요. 배열의 중간값.. 길이가 3인 배열에서 index 1에 해당하는 배열을 빼더라도,

index 1에 해당하는 배열은 기존 배열의 index 2에 해당하는 배열이 되겠죠.

이 말은 위에 보석1,2,3,4 배열을 보시면, 보석2가 index 1이죠?

보석2를 배열에서 빼버리면, 보석3의 index가 1이 됩니다.

당연히 배열이 변경되고 업데이트될때 예상치못한 버그가 발생할수있죠.

단순히 배열 끝만 변경하는 push, pop같은 메소드만 사용하거나,

배열의 변경이 없을거라면 index를 key값으로 해도 상관없습니다.

그런데 개발이라는게 꼭 정해지지만은 않았죠. 언제 어떻게 기획이 바뀔지 모릅니다.

그러므로 key값을 index가 아닌 고유의 값으로 잘 설정해줍시다.

<div v-for="(item, index) in cardList" :key="item.value">{{item.text}}</div>