[Vue] key활용 리렌더링

• 개발을 하다가 apexcharts를 진행하는 도중 간헐적으로 차트에 대한 렌더링이 의도치 않게 진행이 되었다.
• 기존의 데이터가 완전히 삭제되지 않아서 초기화했다고 생각했던 부분이 제대로 되지 않은 것이다.
• apexcharts에서 제공하는 destory(), updateSeries(), updateChartOptions()등이 적용이 되지 않아 key를 활용해서 리렌더링 하고자 하였다.
• key가 하는 일, 장단점을 알아보자

1. Vue에서 key가 하는 일

• Vue는 내부적으로 Virtual DOM을 사용해서 변경된 부분만 효율적으로 업데이트한다.

• 예를 들어 v-for를 사용하면 :key를 적용하는데, 리스트의 데이터가 변경되면 어떤 항목이 추가, 삭제 등이 되었는지 파악하여 최소한 DOM조작으로 업데이트를 한다.

• 그 외에 특정 컴포넌트를 강제로 리렌더링할 때 key를 사용하는데, 컴포넌트의 key값을 변경하면 Vue는 이를 새로운 컴포넌트 인스턴스로 인식하여 기존 컴포넌트를 제거한 다음 새로운 컴포넌트를 생성한다.

  • 즉, unmount 후 새로운 인스턴스를 생성(mount)

• key가 없다면 위치 기준으로 요소를 비교하기에 리렌더링 오류가 생길 수 있다.

<apexchart :key="chartKey" :options="chartOptions" :series="series" type="area" height="350" />

const forceRerender = () => {
  chartKey.value += 1; // key 변경 → 새로운 apexchart 컴포넌트 생성
};

• key값으로는 고유한 문자열이나 숫자를 사용하는게 좋다.

[ 단점 ]

• 리렌더링 비용이 증가한다. 새롭게 만들기 때문이다.

2. 정리

• Vue의 Virtual DOM알고리즘은 위치와 컴포넌트 타입이 같으면 재사용을 한다.
• 즉, 앞서 key를 적용안해도 바뀐다고 생각했지만 이전의 값이 남아있었던 것이 컴포넌트 위치는 동일하기 때문이지 않을까 싶다.
• 그래서 강제 리렌더링을 위해 key를 사용해서 새로운 컴포넌트로 만드는 과정을 거친다.