Vue 2.2부터는 v-for 지시자에 :key 프로퍼티를 사용하는 것이 필수가 됐습니다(Vue2 문서).
<li v-for="item in items">{{ item.message }}</li>이유는 성능 때문입니다. key를 기준으로 렌더링 대상을 식별하면 부하가 적습니다. 어떤 아이템이 바뀌었는지 명확히 식별할 수 있기 때문입니다.
그러나 key가 없으면 그냥 순서를 기반으로 짐작해서 렌더링 대상을 정합니다. 더 많은 DOM을 업데이트해야 하는 것이죠.
예컨대 items에 아이템이 10개 있다고 해 봅시다. 이 때 맨 앞에 있는 아이템 하나를 제거했다고 해 보죠. 만약 위와 같은 코드라면 우선 li DOM이 9개로 변경되고, 9개 DOM의 내용이 모두 업데이트됩니다.
그러나 만약 아래와 같이 key 속성을 넣는다면 그렇지 않습니다.
<li v-for="item in items" :key="item.id">{{ item.message }}</li>아이템의 id를 기반으로 어떤 아이템이 삭제됐는지 식별하기 때문에 DOM 하나만 제거되고 끝나는 것이죠.
아래 영상은 아이템이 11개 있는 상태에서 맨 앞에 있는 아이템을 삭제했을 때 DOM이업데이트되는 모습을 촬영한 것입니다. DOM이 복잡하면 복잡할수록 성능 저하가 크겠지요.
댓글 남기기