Vue의 문제점 - 렌더링 최적화장점이면서 단점

Vue의 장점이면서 단점 중 하나를 살펴보자

 

예시를 들어서 보자

 

먼저 노션 클로닝으로 만든 아래 페이지를 보자

제목없음이라는 상위 문서와

그 아래 제목없음이라는 하위 문서가 있다.

 

두 문서는 내용이 없다.

 

이 두 개의 workspace를 번갈아 가면서 클릭하면 페이지에서는 딱히 변화가 없을 것이다.

왜냐하면 실제로 데이터의 내용이 똑같으니까

 

이렇게 페이지가 전환이 되더라도 Vuejs에서는 최적화를 위해서

동일한 구조의 html은 다시 렌더링을 하지않는 경우가 생긴다.

 

그래서 간혹 페이지가 바뀌었는데도 내용이 유지되는 현상이 생긴다!

 

다시 예시를 보자

 

일단 상위 문서의 아이디는 19805다.

하위 문서의 아이디는 19807이다.

 

상위문서와 하위문서를 번갈아 가면서 누르다가

하위문서에 '123'이라는 내용을 입력한다.

 

그 이후 빠르게 상위문서를 클릭하면 아래와 같이 '123'이라는 내용이 아직 보이는 것을 확인할 수 있다.

- 실제로 주소는 전환이 되어있다.

- 이를 해결하기 위해서는 Vuejs가 최적화하는 것을 분명하게 그때 그때 다르도록 명시해야한다.

 

 

해결 방법

해당 섹션에 key값을 명시하는 것이다.

아래와 같이 key값을 명시하게 되면

페이지가 바뀔때마다 key값도 바뀌게 되고,

Vuejs에서는 해당하는 section을 렌더링할 때 

안의 내용이 같더라도 key의 고유한 값이 다르기 때문에 매번 새롭게 렌더링을 시도하게 된다!