Vue Template(뷰 템플릿)

JavaScript/Vue.js

Vue Template(뷰 템플릿) - 1

devstep88 2021. 1. 12. 21:19

뷰 템플릿이란?

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

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

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

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

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

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

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

데이터 바인딩

HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다.

주요 문법으로는 {{}}문법과 v-bind속성이 있다.

{{ }} - 콧수염 괄호

{{ }}는 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식이다.

{{ }}는 모양이 콧수염과 비슷하다고 하여 콧수염 괄호라고 불린다.

뷰뿐만 아니라 다른 언어나 프레임워크에서도 자주 사용되는 템플릿 문법이다.

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

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

위 코드는 data속성의 message속성값인 Hello Vue.js!를 <div>태그 안의 {{ message }}에 언결하여 화면에 나타내는 코드이다. 여기서 만약 data속성의 message 값이 바뀌면 뷰 반응성에 의해 화면이 자동으로 갱신된다.

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

v-bind

아이디, 클래스, 스타일 등의 HTML 속성(attribute) 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식이다.

형신은 v-bind속성으로 지정할 HTML속성이나 props속성 앞에 접두사로 붙여준다.

...
<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>

실행 결과로는 데이터 속성의 idA, classA, styleA 값이 화면의 요소에 각각 연결되어 나타난 것을 확인할 수 있습니다.

추가로 v-bind: 문법을 :로 간소화가 가능하다. 예로 v-bind:id와 :id는 같은 동작을 한다.

이처럼 약식 문법을 사용할 때는 기본 문법과 약식 문법을 혼용해서 사용하지 않는 것이 좋다.

또한 뷰 코드가 전반적으로 v-접두사를 붙이는 형태이기 때문에 가급적 v-bind속성을 이용하는 것이 기존 HTML문법과 구분도 되고 다른 사람이 코드를 파악하기도 쉽다.

자바스크립트 표현식

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

<div id="app">
	<p>{{ message }}</p>
    <p>{{ message + "!!" }}</p>
    <p>{{ message.split('').reverse().join('') }}</p> // 자바스크립트 API 사용
</div>

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

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

첫째. 자바스크립트의 선언문과 분기구문은 사용할 수 없다.

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

<div id="app">
	{{ var a = 10; }} //선언문은 사용 불가
    {{ if(true) {return 100} }} //분기 구문 사용 불가
    {{ true ? 100 : 0 }} //삼항 연산자는 표현 가능
    
    {{ message.split('').reverse().join('') }} //복잡한 연산은 인스턴스 안에서 수행 -> 불가
    {{ reversedMessage }} //스크립트에서 computed속성으로 계산한 후 최종 값만 표현
</div>

<script>
	new Vue({
    	el: '#app',
        data: {
        	message: 'Hello Vue.js!'
        },
        computed: {  //데이터 속성을 자동으로 계산해 주는 속성
        	reversedMessage: function(){ //{{ reversedMessage }}에 표현되기 전에 연산을 수행하는 함수
            return this.message.split('').reverse().join('');
        	}
        }
    });
</script>

디렉티브

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

앞에서 배운 v-bind도 디렉티브에 해당된다.

디렉티브는 화면 요소를 더 쉽게 조작하기 위해 사용하는 기능이다. 뷰의 데이터 값이 변경되었을 때 화면 요소들이 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)에서 주로 사용되는 속성. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다.

화면에 입력된 값을 저장하여 서버에 보내거나 watch같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다.

<input>, <select>, <textarea>태그에만 사용할 수 있다,

<html>
<head>
    <title>Vue Template - Directives</title>
</head>

<body>
    <div id="app">
        <a v-if="flag">Do it Vue.js</a>
        <ul>
            <li v-for="system in systems">{{ system }}</li>
        </ul>
        <p v-show="flag">Do it Vue.js</p>
        <h5 v-bind:id="uid">뷰 입문서</h5>
        <button v-on:click="popupAlert">경고 창 버튼</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                flag: true,
                systems: ['android', 'ios', 'windows'],
                uid: 10
            },
            methods: {
                popupAlert: function () {
                    return alert('경고 창 표시');
                }
            }
        });
    </script>
</body>
</html>

분량 조절 실패로 다른 기능은 다음 장에 이어서 설명하겠습니다.