Vue 최적화 하기 : re-rendering 방지하기

먼저 이걸 기억하자.

 

v-for 를 사용하는 요소는 독립된 컴포넌트, 즉 .vue 파일이어야한다.

 

Vue 를 사용하면 Virtual DOM 을 사용하므로, 업데이트된 요소만 다시 랜더링된다고 배우지만,

div나 기본 tag를 v-for 하게되면 전체가 랜더링되게 된다.

<template>

  <button @mousedown="add">add</button>
  
  <div v-for="e in len" :key="e" :style="render()">{{e}}</div>

</template>

<script lang="ts">

  import { ref } from 'vue'

  export default {

    setup() {

      const len = ref(0)

      const add = () => len.value++
      const render = () => { console.log('render!'); return {} }

      return { len, add, render }

    }

 
  }

</script>

보이는것처럼, 요소를 추가하는데 모든 요소가 다시 랜더링되고있다.

따라서 v-for 를 할 요소는, 반드시 독립된 vue 파일로 만들어 분리해야한다.