옹재
소소한 개발 블로그
옹재
전체 방문자
오늘
어제
  • 분류 전체보기 (66)
    • 개발 관련 서적 스터디 (6)
    • 프론트엔드 스터디 (36)
      • Javascript (16)
      • Typescript (13)
    • Vue 스터디 (22)
    • 개발 관련 스터디 (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • CSS
  • 프론트엔드 스터디
  • scss
  • 프레임워크 없는 프론트엔드 개발
  • 개발서적 스터디

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
옹재
Vue 스터디

Vue.js의 Render 함수

Vue 스터디

Vue.js의 Render 함수

2021. 5. 7. 16:38
728x90
반응형

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 노드 트리를 만듭니다.

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 트리입니다.

728x90
반응형

'Vue 스터디' 카테고리의 다른 글

How the virtual DOM works in Vue.js  (0) 2021.05.10
Vue.js의 Virtual DOM이란?  (0) 2021.05.10
render : h => h(App)??  (0) 2021.05.07
Vue 스터디 4일차 (템플릿 문법)  (0) 2021.05.04
Vue 스터디 3일차 (컴포넌트 통신)  (0) 2021.04.30
  • Node, Tree, Virtual DOM
  • Virtual DOM
'Vue 스터디' 카테고리의 다른 글
  • How the virtual DOM works in Vue.js
  • Vue.js의 Virtual DOM이란?
  • render : h => h(App)??
  • Vue 스터디 4일차 (템플릿 문법)
옹재
옹재

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.