Vue Functional Component

Dumb Component

Stateless Component


export default {
  functional: true,
  render(h, {props}) {
    return props.routes.map(route =>
      <li key={route.name}>
        <router-link to={route}>
          {route.title}
        </route-link>
      </li>
    )
  }
}

Without Data, Lifecycle

존의 props만 가지고 있는 컴포넌트에 functional 선언을 통해 앱 성능을 향상시킬 수 있다

Vue 2에서는 그런 경우 말고는 쓸모없는듯


<template functional>
</template>


Vue.component('my-component', {
  functional: true,
  render: function (createElement, context) {
  }
})

Vue 렌더링 성능 개선하기

Vue 렌더링 성능 개선을 위한 간단한 방법 몇가지를 설명합니다. 이 문서는 Vue.js 2.6.10 버전을 기준으로 작성되었으며, 자세한 설명은 참고 링크를 확인해주세요. 함수형 컴포넌트는 Dumb(멍청한, 바보같은) 컴포넌트 또는 Stateless (상태 없는) 컴포넌트로 불리며, Data와 Lifecycle을 가지지 않은 컴포넌트를 지칭합니다. 기존의 props만 가지고 있는 컴포넌트에 functional 선언을 통해 앱 성능을 향상시킬 수 있습니다.

https://velog.io/@kyusung/vue-rendering-optimization

Render Functions & JSX - Vue.js

Vue는 템플릿을 사용하여 대다수의 경우 HTML을 작성할 것을 권장합니다. 그러나 JavaScript가 완전히 필요한 상황이 있습니다. 바로 여기에서 템플릿에 더 가까운 컴파일러인 render 함수 를 사용할 수 있습니다. render 함수가 실용적 일 수있는 간단한 예제를 살펴 보겠습니다. 링크를 포함한 헤더를 생성한다고 가정한 예제 입니다. 위의 HTML의 경우 이 컴포넌트 인터페이스가 필요하다고 결정합니다.

https://kr.vuejs.org/v2/guide/render-function.html#%ED%95%A8%EC%88%98%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

Vue Functional Component

Backlinks

Recommendations