[Vue.js] component ... is, keep-alive 알아보기

component

이 컴포넌트는 Build-In Component로 동적 컴포넌트를 렌더링 하기 위한 '메타 컴포넌트'라고 한다.

렌더링 할 실제 컴포넌트는 is props에 의해 결정된다.

 

is props

is 속성에는 문자열이나 컴포넌트 이름을 넣는다. 

 

<!-- is 속성에 해당되는 컴포넌트가 렌더링된다. -->
<component :is="componentId"></component>

<!-- 동적 컴포넌트는 등록된 컴포넌트나 prop로 전달된 컴포넌트를 렌더힝 할 수 있다. -->
<component :is="$options.components.child"></component>

<!-- 동적 컴포넌트는 문자열로 컴포넌트를 참조할 수 있다. -->
<component :is="condition ? 'HeaderComp' : 'FooterComp'"></component> 

<!-- 동적 컴포넌트는 네이티브 HTML 엘리먼트를 렌더링 할 수도 있다. -->
<component :is="href ? 'a' : 'span'"></component>

 

 

keep-alive를 사용하는 동적 컴포넌트

is 속성을 사용하는 경우 다시 돌아왔을 때 계속해서 재렌더링 되어 기존의 클릭값이나 기존 데이터가 유지되지 않는다.

그래서 처음 생성된 컴포넌트 인스턴스가 캐시되기를 원하는 경우에 <keep-alive> 엘리먼트로 감싼다.

<keep-alive>
	<component :is="cntComponent"></component>
</keep-alive>

 

동적 컴포넌트, Keep-alive 예제

 

Main.vue

<template>
  <div id="app">
    <a href="#" @click="changeComponent('Home')">Home;</a>
    <a href="#" @click="changeComponent('Company')">Company</a>
    <keep-alive>
      <component v-bind:is="comp"></component> <!-- 선택한 컴포넌트 바인딩 -->
    </keep-alive>
  </div>
</template>
<script>
  import Home from './Home'
  import Company from './Company'

  export default {
    data() {
      return { comp: 'Home' }
    },
    components: {
      Home,
      Company,
    },
    methods: {
      changeComponent: function(componentName) {
        this.comp = componentName
      }
    }
  }
</script>

 

Home.vue

<template>
  <div>
    <h1>I'm Home Component</h1>
  </div>
</template>
<script>
  export default {
    name: 'Home',
    created() {
      console.log('Home component')
    },
  }
</script>

 

Company.vue

<template>
  <div>
    <h1>{{getTitle}}</h1>
    <button @click="addCompanyCount()"> add company count </button>
  </div>
</template>
<script>
  export default {
    name: 'Company',
    created() {
      console.log('Company component')
    },
    data() {
      return { count : 0 }
    },
    computed: {
      getTitle () {
        return 'I amm Company Component :' + this.count;
      }
    },
    methods: {
      addCompanyCount: function () {
        this.count++
      }
    },
    activated() {
      console.log('Company activated')
    },
    deactivated() {
      console.log('Company deactivated')
    }
  }
</script>

 

처음 Application을 실행했을때 Main.vue 모습이다.

Comany 링크를 클릭하여 component로 이동해보면 count값은 초기값 0, 로그에는 Company activated hook이 실행된것을 볼 수 있다.

 

하단에 "add company count" 버튼을 클릭하여 count 변수를 변경시킨 후

 

상단 Home 링크를 클릭하여 Home component로 이동한다.

그리고 다시 Companay component로 이동해보면 이전 count data가 그대로 유지되어 있음을 알수 있다.

로그를 보면 deactivated, activated hook이 불렸음을 볼 수 있다. 컴포넌트를 메모리에서 내리지 않고 상태 보존이 필요하다면 keep-alive를 활용해보면 되겠다.

 

 

-- The End --