[Vue] 컴포넌트 렌더링에서의 key의 역할

 

Vue는 컴포넌트가 렌더링 될 때 성능을 위해, DOM 트리를 활용하여 변경된 부분만 렌더링을 진행합니다. 컴포넌트나 객체가 변경되는지 여부를 판단하여 데이터를 로드하고 다시 렌더링 합니다.

 

key라는 특수한 속성은 Vue의 가상 DOM 알고리즘이 새로운 노드 목록을 이전 목록과 비교할 때, VNode를 식별하기 위한 힌트로 사용됩니다. key가 없으면 Vue는 엘리먼트 이동을 최소화하고, 같은 유형의 엘리먼트를 제자리에서 패치/재사용하려는 알고리즘을 사용합니다. key를 사용하면, key의 순서 변경에 따라 엘리먼트를 재 정렬하고, 더 이상 존재하지 않는 키가 있는 엘리먼트는 항상 제거/삭제됩니다.

key는 언제 사용하는가? 

key를 가장 많이 사용하는 부분은 아마도 v-for일 것입니다. 2.2.0 이상의 버전에서는 v-for에 key를 의무적으로 사용해야 합니다. 엘리먼트나 컴포넌트를 재사용하지 않고 강제로 대체할 때도 사용할 수 있습니다. 

<ul>
  <li v-for="item in items" :key="item.id">
    <!-- -->
  </li>
</ul>

 

 

최근 프로젝트를 진행하면서 렌더링 관련된 이슈를 겪었었는데, v-for를 사용하지 않았더라도 동일한 부모의 자식 엘리먼트는 반드시 고유 key값이 있어야 한다는 사실을 잊은 채 코딩을 하게 되어 버그가 발생했었다..  chrome 브라우저는 이슈가 없었는데 safari에서만 data가 변경되어도 리 렌더링이 되지 않았던 이슈였다. chrome은 vue에 최적화가 잘 되어 있는 것 같았다. 혹시라도 safari에서 컴포넌트가 리 렌더링이 되지 않을 경우에는 가장 먼저 엘리먼트에 key가 들어가 있는지 우선적으로 확인해봐야 할 것 같다.