[Vue3] 동적 Component

1. 동적 컴포넌트

동적 컴포넌트 :is 는 선택된 탭에 따라 렌더링되는 컴포넌트 기능 및 권한에 따라 노출되는 컴포넌트 기능 등등, 환경에 따른 동적 컴포넌트 렌더링 기능입니다.

 

2. 예제코드

동적 컴포넌트 렌더링 방법에 대한 예제 코드 입니다. 

<template>
    <component :is="renderComponent"></component>
</template>

<script setup lang="ts">
import { onBeforeMount, ref, markRaw } from 'vue';
import ComponentA from '@/pages/ComponentA.vue';
import ComponentB from '@/pages//ComponentB.vue';

const renderComponent = ref(null);

onBeforeMount(async () => {
    if (조건 === 'componentA') {
        renderComponent.value = await markRaw(ComponentA);
    } else {
        renderComponent.value = await markRaw(ComponentB);
    }
});
</script>

<style scoped lang="scss"></style>

markRow :  객체를 원시로 표현한 뒤 반환하여 반응형 시스템에서 관찰되지 않아 불필요한 재렌더링을 줄여 애플리케이션의 성능을 최적화함.

 

markRow로 인하여 watch가 동작되지 않을 경우

// 기존
watch(props, (n, o) => (user.value = props.data));

// 변경
watch(() => {
  if (props.data) {
    user.value = props.data;
  }
}, callback());

 

 

참고사이트

https://peamexx.tistory.com/171