6. 뷰 템플릿 (Template)

# 뷰 템플릿 : HTML, CSS 등의 마크업 속성 <> 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여

사용자가 브라우저에서 볼 수 있는 형태의 HTML 로 변환해주는 속성이다.

​

# 템플릿 속성을 사용하는 방법

(1) 뷰 인스턴스의 template 속성을 활용하는 방법 (ES5)

(2) 싱글 파일 컴포넌트 체계의 <template> 코드를 활용하는 방법 (ES6)

​

(1) 뷰 인스턴스의 template 속성을 활용하는 방법 (ES5)

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

※ 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환한다.

변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 한다. (변환 과정에서 뷰의 반응성 (Reactivity) 이 화면에 더해진다.)

​

(2) 싱글 파일 컴포넌트 체계의 <template> 코드를 활용하는 방법

<template>
  <p>Hello {{ message }}</p>
</template>

# 템플릿에서 사용하는 뷰의 속성과 문법

(1) 데이터 바인딩

(2) 자바스크립트 표현식

(3) 디렉티브

(4) 이벤트 처리

(5) 고급 템플릿 기법

 

데이터 바인딩 (Data Binding) : HTML 요소 ↔ 뷰 인스턴스 데이터 연결

 

# {{ }} 콧수염 괄호 : 뷰 인스턴스 데이터를 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>

# v-bind : HTML 속성 중 id, class, style 값에 뷰 데이터 값을 연결할 때 사용한다.

<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 속성은 : 로 간소화할 수 있다. 예) v-bind:id = :id

다만, 가급적 v-bind 속성을 이용하는 것이 더 좋다.

 

자바스크립트 표현식 : {{ }} 에 자바스크립트를 넣으면 된다.

 

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

# 자바스크립트 표현식에서 주의할 점

(1) 자바스크립트의 선언문과 분기 구문(if)은 사용할 수 없다. 분기 구문을 사용하고 싶다면 삼항 연산자를 사용해야 한다.

(2) 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야 한다.

 

뷰 디렉티브 (Directive) : HTML 태그 안에 v- 접두사를 가지는 속성

# 디렉티브는 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능이다.

뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브 (Reactive) 하게 반응하여 변경된 값에 따라 갱신된다.

이렇게 화면의 요소를 직접 제어할 필요 없이 뷰의 디렉티브를 이용하여 화면 요소를 조작할 수 있다.

 

디렉티브 이름	역할
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	폼(form)에서 주로 사용되는 속성. <input>, <select>, <textarea> 태그에서만 사용 가능. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화함. 화면에 입력된 값을 저장하여 서버에 보내거나 watch 와 같은 고급 속성을 이용하여 추가 로직을 수행

 

이벤트 처리

 

v-on:click="clickBtn"
...
methods: {
  clickBtn: function() {
    ...
...

# event 인자를 이용해 화면 요소의 돔 이벤트에 접근해보기

...
<button v-on:click="clickBtn">Click</button>
...
<script>
  methods: {
    clickBtn: function(event) {
      console.log(event);
    }
  }
</script>

v-on:click 으로 호출하는 메서드에 인자를 전달하지 않아도 clickBtn: function(event) {} 에서와 같이 event 인자를 정의하면

해당 돔 요소의 이벤트 객체에 접근할 수 있다.

 

고급 템플릿 기법

# computed 속성 : 데이터 연산들을 정의하는 영역

 

new Vue({
  el: '#app',
  data: {},
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join();
  }
});

- computed 의 장점

(1) data 속성 값의 변화에 따라 자동으로 다시 연산을 해준다.

(2) 캐싱 : 동일한 연산을 반복하지 않기 위해 연산의 결과를 미리 저장하고 있다가 필요할 때 다시 불러와준다.

예를 들어, 위 예제에서 reversedMessage 연산 결과 값을 여러 곳에 표시해야 한다면 computed 속성의 reversedMessage() 가

연산한 결과를 가지고 있다가 화면에 결과만 표시한다.

​

- computed 와 methods 의 차이점

computed : 대상 데이터의 값이 변경되면 자동으로 수행한다.

methods : 호출할 때에만 해당 로직이 수행된다.

→ 자동적으로 데이터를 갱신하느냐, 수동적으로 데이터를 갱신하느냐의 차이이다.

​

methods 속성은 수행할 때마다 연산을 하기 때문에 별도로 캐싱을 하지 않지만,

computed 속성은 데이터가 변경되지 않는 한 이전의 계산 값을 가지고 있다가 (캐싱하고 있다가) 필요할 때 바로 반환해준다.

​

# watch 속성 : 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다.

​

- computed 와 watch 의 차이점

computed : 내장 API 를 활용한 간단한 연산 정도로 적합하다.

watch : 데이터 호출 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합하다.

​

※ 비동기 처리 : 웹 앱에서 데이터를 호출할 때 일반적으로 서버로 HTTP 요청을 보내는데 자바스크립트 코드가 실행되는 시점에서는

서버에 보낸 요청이 언제 올 지 알 수가 없다. 따라서 다른 자바스크립트 연산에 영향을 주지 못하도록 별도의 영역 (실행 컨텍스트)에서

해당 데이터를 요청하고 응답을 기다린다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input v-model="message">
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js'
            },
            watch: {
                message: function(data) {
                    console.log(data);
                }
            }
        });
    </script>
</body>
</html>

위 소스는 input box 의 내용을 v-model 디렉티브로 연결(message) 하였고,

이 값에 변화가 있을 때마다 watch 에서 감지하여 해당 값(data) 를 출력한다.

​

※ v-model : 화면단의 데이터 <> 스크립트의 특정 데이터와 일치 시켜준다.