Vue.js의 Render 함수

Render Functions

Vue는 대부분의 경우 템플릿을 사용하여 HTML을 구축할 것을 권장합니다. 그러나 Javascript가 완전히 필요한 상황이 있고 그럴 때 render 함수를 사용할 수 있습니다.

<h1> 
    <a name="hello-world" href="#hello-world"> Hello world! </a> 
</h1>

위의 코드와 같이 작성된 HTML이 있을 때,

<anchored-heading :level="1">Hello world!</anchored-heading>

위의 코드와 같이 컴포넌트를 작성하여 사용할 수 있습니다. 이 때 level속성으로 h태그의 종류를 바꿀 수 있는 컴포넌트를 작성한다면,

<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</script>

Vue.component('anchored-heading', { 
    template: '#anchored-heading-template',
    props: { 
        level: { 
            type: Number, 
            required: true 
        } 
    } 
})

위의 코드와 같은 컴포넌트가 작성될 수 있습니다. 하지만 위의 예제는 코드 중복이 많아 장황하게 보입니다. render 함수를 사용하여 다시 작성해 보면,

Vue.component('anchored-heading', { 
    render: function (createElement) { 
        return createElement( 
            'h' + this.level, // 태그 이름 
            this.$slots.default // 자식의 배열 
        ) 
    }, 
    props: { 
        level: { 
            type: Number, 
            required: true 
        } 
    } 
})

위의 코드와 같이 될 수 있습니다. 코드 중복이 없기 때문에 템플릿으로 작성된 코드보다 간단하게 보일 수 있습니다. 이 때, <anchored-heading> 컴포넌트 안에 있는 Hello wold!는 slot 속성이 정의 되어 있지 않기 때문에, $slots.default에 배열로 저장됩니다.

Node, Tree, Virtual DOM

render 함수에 ㅐ해 이야기하기 전에 브라우저 작동 방식을 먼저 이야기해보도록 하겠습니다.

<div> 
    <h1>My title</h1> 
    Some text content 
    <!-- TODO: Add tagline --> 
</div>

브라우저가 위의 코드를 읽게 되면, 아래 그림과 같이 DOM 노드 트리를 만듭니다.

모든 엘리먼트와 텍스트, 심지어 주석도 노드입니다. 노드는 페이지의 조각입니다. 위의 트리에서 볼 수 있듯이 각 노드는 자식을 가질 수 있습니다. 노드를 효율적으로 업데이트 하는 것은 어렵습니다. 하지만 다행히 수동으로 업데이트 할 필요는 없습니다.

<h1>{{ blogTitle }}</h1>

템플릿에서 위의 코드와 같이 작성하거나,

render:function(createElement){
    return createElement('h1', this.blogTitle)
}

위의 코드와 같이 render함수를 사용하면, Vue는 자동으로 페이지를 업데이트합니다.

Virtual DOM

Vue는 실제 DOM에 필요한 변경사항을 추적하기 위해 virtual DOM을 만듭니다.

return createElement('h1', this.blogTitle)

createElement는 Virtual Node(VNode)를 리턴합니다. Virtual Node는 실제 DOM 엘리먼트와 정확하게 일치하지는 않습니다. Virtual DOM은 컴포넌트 트리로 만들어진 VNode 트리입니다.