# 템플릿을 사용하는 이유

# HTML 마크업 vs 가상 DOM

Vue.js는 가상 DOM으로 애플리케이션을 구성하지만, 직접 가상 DOM을 조작하는 것은 매우 까다롭습니다. 확연한 이해를 위해 HTML 마크업과 컴포넌트 렌더 함수를 사용해 가상 DOM을 만들어 내는 코드를 비교해봅시다.

HTML 마크업 → 실제 DOM 트리

<nav id="global-nav">
  <h2>글로벌 내비게이션</h2>
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/guidebook">가이드북</a></li>
  </ul>
</nav>

컴포넌트 렌더 함수 → 가상 DOM 트리

export default {
  name: 'GlobalNav',
  data() {
    return {
      title: '글로벌 내비게이션',
      navLinks: [
        { path: '/', content: '홈' },
        { path: '/guidebook', content: '가이드북' }
      ]
    }
  },
  render(h) {
    // li 가상노드
    const navListItems = this.navLinks.map(link => {
      // a 가상노드
      const navListLink = h('a', { attrs: { href: link.path } }, link.content);
      return h('li', [navListLink]);
    });
    // ul 가상노드
    const navList = h('ul', navListItems);
    // h2 가상노드
    const navTitle = h('h2', this.title);
    // nav#global-nav 가상노드
    const nav = h('nav', { attrs: { id: 'global-nav' } }, [navTitle, navList]);
    return nav;
  }
}

GlobaNav 컴포넌트 렌더 함수가 실행되면 생성된 가상 DOM 트리를 App 컴포넌트에 마운트(Mount) 됩니다.

# 어려운 가상 DOM 보다 템플릿!

살펴본 것처럼 가상 DOM을 직접 조작하려면 HTML 마크업 개발자가 JavaScript 사용 능력이 높아야 합니다. 다시 말해 JavaScript 지식 수준이 얕은 개발자는 가상 DOM을 직접 조작하기 어렵고, 번거롭습니다. 이러한 가상 DOM 조작의 어려움을 해결하기 위해 Vue.js는 템플릿 문법을 제공합니다.

템플릿 문법을 사용하면 복잡하고 어려운 가상 DOM을 직접 조작하는 대신, 친숙한 HTML 마크업을 템플릿 삼아 인터폴레이션을 사용해 데이터를 바인딩 하거나, 디렉티브를 사용해 조건부 렌더링, 리스트 렌더링, 이벤트 바인딩 등 다양한 조작을 수행할 수 있습니다.

앞서 살펴본 가상 DOM 코드와 아래 템플릿 코드를 비교해보세요. 템플릿 코드는 일반적인 HTML 마크업 위에 Vue.js가 제공하는 인터폴레이션({{}}), 디렉티브(v-for, v-bind)를 사용해 컴포넌트의 데이터를 바인딩한 가상 DOM 트리를 생성합니다.

컴포넌트 템플릿

<template>
  <nav id="global-nav">
    <h2>{{ title }}</h2>
    <ul>
      <li v-for="(link,i) of links" v-bind:key="i">
        <a v-bind:href="link.path">{{ link.content }}</a>
      </li>
    </ul>
  </nav>
</template>

컴포넌트 로직

<script>
export default {
  name: 'GlobalNav',
  data() {
    return {
      title: '글로벌 내비게이션',
      navLinks: [
        { path: '/', content: '홈' },
        { path: '/guidebook', content: '가이드북' }
      ]
    }
  }
}
</script>

# 참고

보다 자세한 사용법은 템플릿 문법 문서를 참고하세요.