Vue #6 - 뷰 템플릿

뷰 템플릿이란?

---

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

 

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

// ES5에서 template 속성
new Vue({
  template: '<p>Hello {{ message }}</p>'
});

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

 

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

두 번째는 싱글 파일 컴포넌트 체계의 <template> 코드를 활용하는 방법이다.  또 템플릿에서 사용하는 뷰의 속성과 문법은 아래와 같다.

 

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

 

데이터 바인딩

---

데이터 바인딩은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다. 주요 문법으로는 {{ }} 문법과 v-bind속성이 있다.

 

{{ }} 는 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식이다. {{ }}는 모양이 콧수염과 비슷하다고 하여 콧수염 괄호라고 부른다. 뷰뿐만 아니라 다른 언어나 프레임워크에서도 자주 사용되는 템플릿 문법이다.

위 코드는 HTML의 기본 속성인 id, class, style의 앞에 v-bind:를 붙여서 뷰 인스턴스에 정의한 데이터 속성과 연결하여 화면에 나타낸다.

 

 

 

자바스크립트 표현식

---

뷰의 템플릿에서도 자바스크립트 표현식을 쓸 수 있다. 데이터 바인딩 방법 중 하나인 {{ }} 안에 자바스크립트 표현식을 넣으면 된다.

자바스크립 표현식을 사용할 때 주의할 점이 두 가지가 있다. 첫째, 자바스크립트의 선언문과 분기 구문을 사용할 수 없다. 둘째, 복잡한 연산은 인스턴스 안에서 처리하고 화면에서 간단한 결과만 표시해야 한다. 이유는 HTML에 최종적으로 표현될 갓만 나타내고, 데이터의 기본 연산은 자바스크립트 단에서 함으로써 화면단 코드의 가독성을 높일 수가 있기 때문이다. 또 필요할 때 바로 불러오는 캐싱 효과를 얻을 수 있다.

 

 

디렉티브

---

뷰 디렉티브는 HTML 태그 안에 v- 접두사를 가지는 모든 속성들을 의미한다. 

 

v-if

지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.

 

v-for

지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력한다.

 

v-show

v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. 다만, v-if는 해당 태그를 완전히 삭제하지만 v-show는 css 효과만 display:none으로 주어 실제 태그는 남아 있고 화면 상으로만 보이지 않는다.

 

v-bind

HTML 태그의 기본 속성과 뷰 데이터 속성을 연결한다.

 

v-on

화면 요소의 이벤트를 감지하여 처리할 때 사용한다. 예를 들어, v-on:click은 해당 태그의 클릭 이벤트를 감지하여 특정 메서드를 실행할 수 있다.

 

v-model

폼에서 주로 사용되는 속성이다. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다. <input>, <select>, <textarea> 태그에만 사용할 수 있다.

 

이벤트 처리

---

웹 앱에서 사용자의 클릭이나 키보드 입력과 같은 이벤트를 처리하는 것은 당연하다. 뷰 역시 화면에서 발생한 이벤트를 처리하기 위해 v-on 디렉티브와 methods 속성을 호라용한다.

위 코드는 <button> 태그에 v-on:click 디렉티브를 추가하여 클릭 버튼을 클릭하면 clickBtn() 메서드가 실행된다.

 

 

고급 템플릿 기법

---

고급 템플릿 기법은 실제 애플리케이션을 개발할 때 유용한 속성으로 데이터바인딩, 디렉티브와 같은 기본적인 문법과 함께 사용한다.

 

computed 속성

computed 속성은 복잡한 연산은 뷰 인스턴스 안에서 하고 최종적으로 HTML에 표현하게 해준다. computed 속성의 첫 번째 장점은 data 속성 값의 변화에 따라 자동으로 다시 연산한다는 점이다. 두 번째 장점은 캐싱이다. 캐싱은 동일한 연산을 반복해서 하지 않기 위해 연산의 결과 값을 미리 저장하고 있다가 필요할 때 불러오는 동작이다.

 

watch 속성

watch 속성은 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다. computed 속성과 유사하지만 computed 속성은 내장 API를 활용한 간단한 연산 정도로 적합한 반면에, watch 속성은 데이터 호출과 같이 시간이 상대적으로 많이 소모되는 비동기 처리에 적합하다.

v-model 디렉티브는 앵귤러의 양방향 데이터 바인딩을 본따 만든 뷰의 기능이다. 앵귤러와 동일한 방식으로 화면단의 데이터를 스크립트단의 특정 데이터와 일치시킨다.