JavaScript

[Vue] render:h=>h(App)

  • -
반응형

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

 

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

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

 

바로 render라는 속성이 정의된 부분인다. h=>h(App)이라고 적힌 부분이다. 

 

이 문장의 얌전한 표현은 다음과 같다.

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

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

여기서 createElement는 함수 입장에서는 단지 변수명이기 때문에 h로 바꿔보자.

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

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

 

It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".

 

위 표현을 arrow 표현식으로 적으면

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

 arrow 표현식이 리턴 문장 하나로만 구성되어있으므로 좀 간단히 적으면

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

 

반응형
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.