[VUE] template render vs render function

Vue 3에서 동적 컴포넌트를 임포트하는 두 가지 방식을 적용하고 비교해봤다.

---

 

1. 템플릿 방식

- 코드가 직관적이고 가독성이 좋음

- 일반적인 상황에서 권장되는 방식

<template>
  <component :is="currentComponent" v-bind="componentProps" />
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue';

const currentComponent = defineAsyncComponent(() => 
  import(`./components/${componentName}.vue`)
);
</script>

 

 

 

2. 렌더 함수(h()) 방식

 

- 더 세밀한 프로그래밍적 제어가 가능함
- 복잡한 렌더링 로직 구현에 유용함
- 동적 컴포넌트 생성에 더 많은 유연성을 제공함

import { h } from 'vue'

const RenderComponent = {
  setup() {
    return () => h(currentComponent.value, {
      ...componentProps.value
    });
  }
};

 

 

두 가지 렌더링 방식을 실제로 비교해본 결과, 템플릿 방식이 가독성과 사용성 측면에서 더 좋았다. 렌더 함수(h()) 방식도 유용한 기능이지만, 일반적인 개발 상황에서는 템플릿 방식이 더 직관적이고 효율적인것 같다. 렌더 함수는 특수한 상황에서 활용할 수 있는 방법으로 이해하고 넘어가는 것이 좋겠다.

 

 

참고

https://stackoverflow.com/questions/59233378/template-render-vs-render-function-h-in-vue-3