VUE 템플릿(Template)

뷰 템플릿이란?

뷰의 템플릿(Template)은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성입니다.

템플릿 속성을 사용하는 방법은 두 가지로, 첫 번째는 ES5에서 뷰 인스턴스의 template 속성을 활용하는 방법입니다. 

지금까지 예제에서 주로 사용한 t e m p l a t e: <p>H e l l o {{message}}</p>와 같은 코드가 템플릿을 의미합니다. 

 

<script>
	new Vue({
		template: '<p>Hello {{ message }}</p>'
	});
</script>

ES5에서 template 속성

여기서 템플릿 속성에 대해 한 가지 알아둘 특징이 있습니다. 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환합니다. 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 합니다. 그리고 변환 과정에서 뷰의 반응성(Reactivity)이 화면에 더해집니다. 

JSX 기반의 render() 함수에 더 익숙한 리액트 개발자라면 template 속성을 이용하지 않고 render() 함수를 사용해 화면 요소를 동일하게 구현할 수 있습니다. 하지만 뷰 프레임워크 특징 자체가 JSX나 render() 함수를 모르는 사람들도 쉽게 HTML를 이용하여 개발할 수 있게 하는 것을 목표로 하기 때문에 template 속성을 사용하도록 권하고 있습니다. 추후에 뷰의 반응성과 가상 돔에 대해 충분히 이해하고 나면 render() 함수를 직접 구현할 수 있습니다. 그러면 화면 요소의 동작 하나 하나에 직접 관여할 수 있기 때문에 더 빠르게 화면을 렌더링할 수 있을 것 입니다.

 

 

template 속성을 사용하지 않은 경우(왼쪽) vs 사용한 경우(오른쪽)

<div id="app">  <h3>{{ message }}</h3> </div> ... <script>  new Vue({    el: '#app',    data: {      message: 'Hello Vue.js!'    }  }); </script>

<div id="app"> </div> ... <script>  new Vue({    el: '#app',    data: {      message: 'Hello Vue.js!'    },    template: '<h3>{{ message }}</h3>'  }); </script>

 

왼쪽 코드는 먼저 <h3>{{ message }}</h3>를 화면에 표시하고, 인스턴스가 생성되면 message의  값을 Hello Vue.js로 치환합니다. 오른쪽 코드는 <div id=”app”>에 아무런 내용이 없다가 인스턴스가 생성되면 <h3>Hello Vue.js!</h3>가 화면에 달라붙어 표시됩니다.

 

두 번째는 싱글 파일 컴포넌트 체계의 <template> 코드를 활용하는 방법입니다.

<!-- ES6 : 싱글 파일 컴포넌트 체계 -->
<template>
	 <p>Hello {{ message }}</p>
</template>

싱글 파일 컴포넌트 체계에서 template 속성 사용 방법

 

템플릿에서 사용하는 뷰의 속성과 문법은 다음과 같습니다. 

 

• 데이터 바인딩
• 자바스크립트 표현식
• 디렉티브
• 이벤트 처리
• 고급 템플릿 기법

 

다음 포스팅에서는 데이터 바인딩에 대한 정보를 알려드리겠습니다.