[vue] 동적 컴퍼넌트 호출 feat. [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead ..

vue 문서들을 보던중,

동적 엘리먼트 부분에서 v-is라는 속성을 보아 테스트 해봄

데이터에따라 동적으로 컴퍼넌트를 호출할때 사용한다 함

(vue3 기준)

 

*주의점

vue2에서는

// vue2 
is="HelloWorld"

// vue3
:is="'HelloWrold'"

위와 같이 네이티브 태그에 is옵션을 사용하였고

vue3에서는 디렉티브로 바뀌어 문자열값을 사용할 경우 "" 안에 ''을 추가해주어야함

 

 

---

<template>
	<component :is="components"
	<button @click="changeComponent"></button>
</template>

<script>
	...
    components: {
    	HelloWorld,
        HelloWorld2
    },
    data() {
    	return {
        	components: HelloWorld
        }
    },
    methods: {
    	changeComponent() {
        	this.components = HelloWorld2;
        }
    }
</script>

사용법은 위와 같음

 

 

 

---

[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 

 

다만 위와 같은 경고문이 출력돼 이유를 알아보는중.

 

==> Vue는 반응성 객체로 만들어진 구성 요소를 받았습니다. 이로 인해 불필요한 성능 오버헤드가 발생할 수 있으므로 구성 요소를 'markRaw'로 표시하거나 'ref' 대신 'shallowRef'를 사용하는 것은 피해야 합니다.

 

1. ref가 없어서 그런가? x 아니었음

2. 뭔가 v-for의 :key처럼 참조를 걸어줘야하나?

3. "구성 요소를 Vuex 상태로 저장하면 반응형으로 만듭니다. 이에 대한 한 가지 접근 방식은 매핑 개체를 사용하는 것입니다. 따라서 구성 요소를 상태에 저장하는 대신 해당 구성 요소에 대한 키 참조를 저장하고 개체에 대해 조회합니다."       

라는 답변을 봄. vuex는 아니긴한데.. 키참조를 저장하라니 한번 해보겠음

4. 아닌거같음..

5. `markRaw`가 뭔지 알아보는중

6. 객체관련 문장들이 나오는걸보니 :is에 객체를 담아주면 안되나?

7.{{components}}를 출력해보니

{
  "name": "HelloWorld",
  "__scopeId": "data-v-469af010",
  "__file": "src/components/HelloWorld.vue",
  "__hmrId": "469af010"
}

오브젝트로 나오네

 

8. 

 import HelloWorld from './components/HelloWorld.vue'
 
 
 data() {
    return {
      components: HelloWorld.name
    }
  },

처럼 string으로 수정 해주니 warn 없음