render: h => h(App)

vue/cli 로 프로젝트를 생성하고 

이미 생성되어있는 main.js 파일을 들여다보면 있는 render:h => h(App)

...이게 뭐고? 라는 생각이 절로 들어서 검색했다..

// 제목 : 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);

Virtual DOM

Vue는 실제 DOM에 필요한 변경사항을 추적하기 위해, 기본으로 브라우저에서 형성하는 “DOM Node” Tree 외에도 자체적으로 Virtual DOM을 만들어서 가지고 있다.

return createElement('h1', this.blogTitle)

바로 createElement 명령을 통해 반환되는 객체가 Virtual DOM의 노드가 된다. 이를 VNode라고 부른다.

render 함수는 Vue의 실행 환경에서 createElement 함수를 인자로 받고, 이를 통해 만들어진 VNode를 반환하는 구조를 가진다.

즉, Vue CLI의 main.js에 있는

render: h => h(App)

이라는 암호(?)같은 표현은 사실

render: (createElement) => { return createElement(App) }

이었던 것이다.