Vue의 Dynamic components 간단 정리

Dynamic components (동적 컴포넌트)

🚗 Dynamic component란

렌더링되는 컴포넌트를 동적으로 변경되는 것

특정 조건에 따라 다른 컴포넌트를 mount하는 것

 

 

🚗 Dynamic component 사용법

컴포넌트를 동적으로 변경하고 싶을 때 v-bind: is 속성을 활용한다.

<component :is="컴포넌트이름"></component>

 

(1) 동적 컴포넌트 생성

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

 

(2) 동적으로 컴포넌트 변경하기 (shallowRef가 ref 보다 퍼포먼스가 더 좋다)

// const currentComp = ref(자식컴포넌트);
const currentComp = shallowRef(자식컴포넌트);

 

※ shallowRef와 ref의 차이

둘다 반응형이다.

shallowRef는 ref의 얕은 버전이다.

shallowRef는 속성에 대해서는 반응하지 않고 값(.value)에만 반응한다.

// ref
const obj1 = ref({ name: '김테이' });

// shallowRef
const obj2 = shallowRef({ name: '김테이' });

ref는 obj1.value.name에 반응함 (속성에 반응)

shallowRef는 obj2.value.name에 반응안함 (속성에 반응 안함), obj2.value에만 반응한다. (값 자체만 반응)

 

 

(3) 변경하는 메서드 생성

const changeCurrentComp = comp => {
	currentComp.value = comp;
};

 

(4) 메서드를 등록하여 클릭하면 동적 컴포넌트가 변경된다.

<button @click="changeCurrentComp(자식컴포넌트1)">자식1</button>
<button @click="changeCurrentComp(자식컴포넌트2)">자식2</button>

 

 

🚗 동적 컴포넌트 주의사항

동적 컴포넌트인 <component :is="어쩌구" /> 를 사용하면 컴포넌트간 전환시 매번 mount가 해제된다.

이렇게 되면 컴포넌트를 전환하게 되면 이 전 컴포넌트에서의 모든 변경된 상태가 손실된다.

이 때 KeepAlive 내장 컴포넌트를 사용하면 비활성 상태인 컴포넌트들의 활성 상태를 유지할 수 있도록한다.

 

 

🚗 KeepAlive

KeepAlive는 여러 컴포넌트 간에 동적으로 전환될 때 컴포넌트 인스턴스를 조건부로 캐시할 수 있는 빌트인 컴포넌트이다.

<!-- 비활성 컴포넌트가 캐시됩니다! -->
<KeepAlive>
	<component :is="activeComponent" />
</KeepAlive>