[도서] Do it! Vue.js - 템플릿

미소·2022년 3월 11일

Do it! Vue.js

목록 보기

5/9

Do it! Vue.js 입문 도서를 읽고 중요한 부분만 정리합니다!
구매링크: http://www.yes24.com/Product/Goods/58206961
참고링크: http://wiki.x2bee.com/pages/viewpage.action?pageId=8553860

뷰 템플릿

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

템플릿 속성

특징

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

사용하는 방법

ES5에서 뷰 인스턴스의 template 속성을 활용하는 방법

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

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

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

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

1. 데이터 바인딩(Data Binding)

HTML 파일 요소를 뷰 인스턴스의 데이터와 연결하는 것

{{ }} - 콧수염 괄호

{{ }}는 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식이다.
아래 코드에서 data 속성의 message 값이 바뀌면 뷰의 반응성에 의해 화면이 자동으로 갱신된다.
만약 뷰 데이터가 변경되어도 값을 바꾸고 싶지 않다면 v-once 속성을 사용한다.

<div id="app"> <!-- <div id="app" v-once> 속성을 사용할 수 있다. -->
  {{ message }}
</div>

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

v-bind

아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식이다. 형식은 v-bind 속성으로 지정할 HTML 속성이나 props 속성 앞에 접두사로 붙여준다.
v-bind:style은 :style과 동일한 의미를 가진다.

v-bind_예제.html

2. 자바스크립트 표현식

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

//X
{{ var a = 10; }} //선언문은 사용 불가능
{{ it(true) { return 100 } }} //분기 구문은 사용 불가능
{{ message.split('').reverse().join('') }} //복잡한 연산은 인스턴스 안에서 수행

//O
{{ true ? 100 : 0 }} //삼항 연산자 표현 가능

자바스크립트 표현식_예제.html

3. 디렉티브(Directive)

HTML 태그 안에 v- 접두사를 가지는 모든 속성들을 의미한다.
화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능이다. 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브(Reactive)하게 반응하여 변경된 데이터 값에 따라 갱신한다.

<!-- 뷰 인스턴스 데이터 속성에 정의된 flag 값에 따라 보이거나 안 보이게 설정 -->
<a v-id="flag">두잇 Vue.js</a>

주요 디렉티브

v-if: 지정한 뷰 데이터 값의 참, 거짓 여부에 따라 HTML 태그를 화면에 표시하거나 표시하지 않는 설정
v-for: 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력하는 설정이다.
v-show: 데이터의 진위 여부에 따라 HTML 태그를 화면에 표시하는 설정이나 CSS 효과인 display: none;으로 주어 실제 태그는 남아있고 화면 상으로만 보이지 않는다.
v-bind: HTML 태그의 기본 속성과 뷰 데이터 속성을 연결하는 설정이다.
v-on: 화면 요소의 이벤트를 감지하여 처리할 때 사용하는 설정이다. 간추려서 v-on:click → @click으로 표현 가능하다.
v-model: 폼에서 주로 사용되는 속성으로 폼에 입력된 값을 뷰 인스턴스의 데이터와 즉시 동기화하는 설정이다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다. <input>, <select>, <textarea> 태그에서만 사용 가능하다.

디렉티브_예제.html

4. 이벤트 처리

사용자의 클릭이나 키보드 입력과 같은 이벤트를 처리하는 것이다.
이벤트처리_예제.html

5. 고급 템플릿 기법

실제 어플리케이션 개발할 때 유용한 속성으로, 앞에서 배운 데이터 바인딩, 디렉티브와 같은 기본적인 문법과 함께 사용한다.

computed 속성

데이터를 가공하는 등의 복잡한 연산은 뷰 인스턴스 안에서 하고 최종적으로 HTML에는 데이터만 표현가능하도록 하는 속성이다.

장점
1. 연산
→ data 속성 값이 변경되면 전체 값을 다시 계산한다.
2. 캐싱
→ 동일한 연산을 반복하지 않기 위해 연산 결과 값을 미리 저장하였다가 필요할 때 불러오는 동작이다. 만약 계산한 결과를 화면의 여러 곳에서 표시해야한다면 미리 연산한 결과를 가지고만 있다가 화면에 결과를 표시한다.

자바스크립트 표현식_예제.html

computed 속성과 methods 속성의 차이점
methods 속성은 호출할 때만 로직이 수행되고, computed 속성은 대상 데이터 값이 변경되면 자동으로 수행된다. (능동/수동)
methods의 경우 캐싱을 하지 않지만 computed는 캐싱을 하여 필요할 때 바로 반환한다.
복잡한 연산을 반복 수행하여 화면에 나타내야 한다면 computed 속성을 이용하는 것이 좋다.

computed methods 차이_예제.html