반응형

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');

 

반응형

'JavaScript' 카테고리의 다른 글

[promise]03. axios를 이용한 promise 연습  (0) 2019.11.22
[promise]02. promise 기본 문법  (0) 2019.11.22
[promise]01. callback hell과 promise  (0) 2019.11.22
[Vue] render:h=>h(App)  (1) 2019.11.14
유용한 링크 모음  (0) 2019.11.08
[vanilla js]forEach와 some  (0) 2019.11.05
  1. 땐써 2020.03.02 10:37

    뷰를 처음 공부하는 늙은 개발자 입니다.
    자바스크립트가 이렇게 많이 변해 버린 현실 속에서 html, dhtml, asp, jsp 초기 시절 개발때와 너무나도 변해버린 자바스크립트에 배신감을 느낄 정도 입니다.
    이제 배치잡들과 백엔드 개발에서 UI front 단으로 나오려는데 너무 어렵네요.
    돈을 주고 유료강의를 접하다가 이해하지 못 하고 있던 부분 이었는데
    이렇게 풀어서 설명을 해 주셔서 감사합니다.
    앞으로도 많은 도움 받아가겠습니다.
    행복하시고...요.
    감사합니다.
    끝.

+ Recent posts