초기 조건과 관계 없이 렌더링되며, 실제로 CSS display 속성만을 변경
초기 렌더링 시간이 오래 걸리더라도 지속적으로 토글되는 경우, v-show를 사용하는 것을 추천
Vue 렌더링 성능 개선하기
Vue 렌더링 성능 개선을 위한 간단한 방법 몇가지를 설명합니다. 이 문서는 Vue.js 2.6.10 버전을 기준으로 작성되었으며, 자세한 설명은 참고 링크를 확인해주세요. 함수형 컴포넌트는 Dumb(멍청한, 바보같은) 컴포넌트 또는 Stateless (상태 없는) 컴포넌트로 불리며, Data와 Lifecycle을 가지지 않은 컴포넌트를 지칭합니다. 기존의 props만 가지고 있는 컴포넌트에 functional 선언을 통해 앱 성능을 향상시킬 수 있습니다.
https://velog.io/@kyusung/vue-rendering-optimization
조건부 렌더링 - Vue.js
v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용됩니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. v-else 와 함께 "else 블록"을 추가하는 것도 가능합니다. v-if는 디렉티브기 때문에 하나의 엘리먼트에 추가해야합니다. 하지만 하나 이상의 엘리먼트를 트랜지션하려면 어떻게 해야할까요? 이 경우 우리는 보이지 않는 래퍼 역할을 하는 엘리먼트에 v-if를 사용할 수 있습니다.
https://kr.vuejs.org/v2/guide/conditional.html
