[Vue] 뷰 템플릿

들어가기 앞서

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

ES5에서 뷰 인스턴스의 template 속성을 이용하는 방법
싱글 파일 컴포넌트 체계의 <template> 코드를 활용

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

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

1. 데이터 바인딩

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

1-1. { { } } - 콧수염 괄호

중괄호 2개를 이용하는 방법은 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식이다.

<div id = "app">
	{ {message}}
</div>

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

만약 데이터가 변경되어도 값을 바꾸지 않고 싶다면, v-once 속성을 사용한다.

<div id = "app" v-once>
	{ {message}}
</div>

1-2. v-bind

v-bind는 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용한다.

...
    <div id="app">
      <p v-bind:id="idA">아이디 바인딩</p>
      <p v-bind:class="classA">클래스 바인딩</p>
      <p v-bind:style="styleA">스타일 바인딩</p>
    </div>
...
    <script>
      new Vue({
        el: '#app',
        data: {
          idA: 10,
          classA: 'container',
          styleA: 'color: blue'
        }
      });
    </script>
...

추가적으로, v-bind: 문법을 :로 간소화 할 수 있다. 그러나 약식문법은 혼동을 야기할 수 있으므로, 기본 문법으로 쓰자.

2. 자바스크립트 표현식

뷰의 템플릿에서도 자바스크립트 표현식을 사용할 수 있다. { { } }안에 자바스크립트 표현식을 넣으면 된다.

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

출력
Hello Vue.js!
Hello Vue.js!!!
!sj. euV olleH

그러나 위와 같은 방식에서 다음과 같은 2가지를 주의해야 한다.

자바스크립트의 선언문과 분기 구문은 사용 불가능
복잡한 연산은 인스턴스 안에서, 화면에서는 간단한 결과만 표시

...
    <div id="app">
      <!-- 1. -->
      { { var a = 10; }} <!-- X, 선언문은 사용 불가능 -->
      { { if (true) {return 100} }} <!-- X, 분기 구문은 사용 불가능 -->
      { { true ? 100 : 0 }} <!-- O, 삼항 연산자로 표현 가능 -->

      <!-- 2. -->
      { { message.split('').reverse().join('') }} <!-- X, 복잡한 연산은 인스턴스 안에서 수행 -->
      { { reversedMessage }} <!-- O, 스크립트에서 computed 속성으로 계산 후 최종 값만 표현 -->
    </div>
...
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        },
        computed: {
          reversedMessage: function() {
            return this.message.split('').reverse().join('');
          }
        }
      });
    </script>
...

위에서 역순으로 변환하는 함수는 computed 속성을 이용해 계산을 한다.
이러한 방법은 캐싱 효과를 제공하여 성능을 높일 수 있다.

3. 디렉티브

뷰 디렉티브(Directive)란 HTML 태그 안에 v- 접두사를 가지는 모든 속성을 의미하며 다음과 같은 종류가 존재한다.

v-if: 지정한 뷰 데이터 값의 참, 거짓 여부에 따라 HTML 태그를 화면에 표시하거나 표시하지 않음
v-for: 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력
v-show: 데이터의 진위여부에 따라 표시하거나 표시하지 않음, 실제 태그는 남아있고 화면상으로만 노출하지 않음
v-bind: 뷰 데이터 - HTML 기본속성 연결
v-on: 화면 요소의 이벤트를 감지하여 처리
v-model: 폼(form)에서 주로 사용, 폼의 값과 뷰 데이터를 즉시 동기화.
화면에 입력된 값을 저장하여 서버에 보내거나, watch와 같은 속성을 사용하여 추가 로직 수행

4. 이벤트 처리

뷰는 화면에서 발생한 이벤트를 처리하기 위해 v-on 디렉티브와 method 속성을 사용한다.

...
    <div id="app">
      <button v-on:click="clickBtn">클릭</button>
    </div>
...
    <script>
	// 클릭 이벤트 처리 
    	methods: {
          clickBtn: function() {
            alert('clicked');
		  }
        }

	// 매서드 호풀 시, 인자 값 넘기기 
    	methods: {
          clickBtn: function(num) {
            alert('clicked' + num + 'times');
		  }
        }

	// event 인자를 이용해 화면 요소의 돔 이벤트에 접근 
    	methods: {
          clickBtn: function(event) {
            console.log(event);
		  }
        }
    </script>
...

5. 고급 템플릿 기법

고급 템플릿 기법은 데이터 바인딩과 디렉티브 같은 기본적인 문법과 함께 사용하는 유용한 속성이다.

5-1. computed 속성

computed 속성은 데이터 연산들을 정의하는 영역으로, 다음과 같은 장점을 지닌다.

data 속성 값의 변화에 따라 자동을 다시 연산
캐싱

캐싱의 특징을 정확히 이해하려면, 비슷한 기능을 하는 method 기능과의 비교가 필요

5-2. computed 속성과 methods 속성의 차이점

가장 큰 차이점은 method 속성은 호출할 때만 해당 로직이 수행되고, computed 속성은 값의 변경에 따라 자동적으로 수행 된다는 것이다.
다시 말해, method 속성은 수행할 때마다 연산을 하기에 별도로 값을 저장하지 않는다.
하지만, computed 속성은 데이터가 변경되지 않는한 이전 값을 캐싱하고 있다가, 반환한다.

따라서 복잡한 연산을 반복 수행해서 화면에 나타낼 경우, computed 속성을 이용하는 것이 효율적이다.

5-3. watch 속성

watch 속성은 데이터의 변화를 감지하여 자동으로 특정 로직을 수행한다.
computed 속성과 비슷하지만, computed 속성은 간단한 연산을 수행하는 반면에,
watch 속성은 데이터 호출 처럼 상대적으로 더 많이 소요되는 비동기 처리에 적합하다.

끝마치며

뷰 템플릿에 대하여 간단하게 알아보았다. 다음 포스팅에서는 뷰 프로젝트의 구성에 대해 알아볼 예정이다.

<< Previous Next >>

vue.js에 대한 이해 - 6

글 목록으로

목차