Vue.js 러닝 가이드북

렌더 함수

렌더 함수가 유용한 경우

Vue.js는 템플릿을 사용해 HTML을 작성할 것을 권장합니다. 하지만 컴포넌트 render 함수를 사용해 JavaScript만으로 컴파일하는 것이 유용할 때도 있습니다. 컴포넌트 렌더 함수 사용법을 알아보겠습니다.




링크를 포함한 제목 컴포넌트를 만들어 봅시다. a-heading 컴포넌트는 제목 레벨과 텍스트 콘텐츠를 슬롯(slot)으로 전달 받습니다.

<a-heading :level="2">렌더 함수</a-heading>
1

보다시피 템플릿으로 작성된 예제는 상당히 복잡하고 장황합니다.

<h1 v-if="numberLevel === 1">
  <a :href="changeSlotPath">
    <slot />
  </a>
</h1>
<h2 v-else-if="numberLevel === 2">
  <a :href="changeSlotPath">
    <slot />
  </a>
</h2>
<h3 v-else-if="numberLevel === 3">
  <a :href="changeSlotPath">
    <slot />
  </a>
</h3>
<h4 v-else-if="numberLevel === 4">
  <a :href="changeSlotPath">
    <slot />
  </a>
</h4>
<h5 v-else-if="numberLevel === 5">
  <a :href="changeSlotPath">
    <slot />
  </a>
</h5>
<h6 v-else>
  <a :href="changeSlotPath">
    <slot />
  </a>
</h6>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

템플릿 대신 렌더 함수를 사용하면 다음과 같이 변경할 수 있습니다. 장황한 템플릿 보다 간단하게 동일한 처리가 가능합니다.

render(h) {
  const link = h('a', { attrs: { href: this.changeSlotPath } }, this.$slots.default);
  return h(`h${this.level}`, [link]);
}
1
2
3
4

Vue 템플릿 익스플로러

Vue 템플릿 익스플로러 서비스를 이용하면 손쉽게 템플릿 코드를 렌더 함수 코드로 변경할 수 있습니다.

참고

보다 자세한 내용은 렌더 함수 문서를 참고하세요.

← JSX →