render : h => h(App)??

vue-cli 기반으로 Vue를 만들면 main.js에 이해하기 어려운 코드가 적혀있습니다.

import Vue from 'vue'
import App from './App.vue'

new Vue({
    render: h => h(App)
}).$mount('#app')

바로 Vue 인스턴스에 render라고 정의된 속성부분입니다. 이 문장을 표현하면 다음과 같다고 합니다.

render: function(createElement){
    return createElement(App);
}

즉 내부적으로 createElement라는 함수를 파라미터로 받고 이 함수에 App.vue를 넘겨줘서 element를 생성하는 것이라고 합니다.

여기서 h는 hyperscript의 약자로 Virtual DOM에서 관용적으로 사용되는 표현인데 HTML 구조를 생성하는 스크립트라는 의미라고 에반 유가 이야기했습니다.

// 제목 : ES6 기반 Vue.js 개발 프로젝트에서 마주치는 render: h => h(App) 해석
// 설명 : render:h => h(App)은 Vue.js의 기본적인 render function의 간소화 버전
// 변환과정 : #1 -> #2 -> #3 -> #4

// #1
render: function (createElement) {
    return createElement(App);
}

// #2
render (createElement) {
    return createElement(App);
}

// #3
render (h){
    return h(App);
}

// #4
// 참고 : h는 hyperscript의 약자로 HTML 구조를 생성하는 스크립트를 의미. Virtual DOM 구현에서 관행적으로 사용
render: h => h(App);