Vue - 동적 컴포넌트, KeepAlive, activated 사용법

동적 컴포넌트(Dynamic Component) 란?

Vue에서는 컴포넌트를 동적으로 사용할 수 있는 방법이 있습니다.

<component :is="componentName"></component>

 

위와 같이 <component>라는 특수 컴포넌트가 있습니다.

is Props에 컴포넌트 이름의 문자열이나, 컴포넌트 객체를 넣으면 컴포넌트를 동적으로 만들 수 있습니다.

 

주로 탭패널이나, 동적으로 변경되어야 할 사항에서 사용합니다.

<KeepAlive>

동적 컴포넌트를 이용하여 컴포넌트를 변경하면, 컴포넌트가 변경될 때, unmounted 상태가 됩니다.

unmounted 상태가 되면, 이전에 가지고 있었던 데이터들이 손실되게 됩니다.

 

특정한 탭 패널 같은 경우에는 탭 전환이 일어나도, 이전에 가지고 있었던 데이터를 그대로 사용하고 싶을 때가 있습니다.

그럴 경우에 KeepAlive 태그를 사용합니다.

<KeepAlive>
   <component :is="componentName"></component>
</KeepAlive>

 

KeepAlive 태그를 사용하면, 이전에 사용하였던 데이터를 캐시에 저장하고 있어서,

컴포넌트가 동적으로 변경되어도 데이터를 가지고 있습니다.

 

activated, deactivated

Vue에서는 activated, deactivated라는 두 가지 훅이 있습니다.

	동작 시기
activated	mount 될때, 캐시된 컴포넌트가 활성화 될때
deactivated	unmount 될때 캐시된 컴포넌트가 다시 비활성활 될때

export default {
  activated() {
  	console.log('activated');
  },
  deactivated() {
    console.log('deactivated');
  }
}