뷰 템플릿

뷰 템플릿

---

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

템플릿 속성을 사용하는 방법은 두 가지가 있는데, 

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

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

템플릿 속성에 대해 반드시 알아야 할 특징이 있는데, 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환한다.

변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 한다.

그리고 변환 과정에서 뷰의 반응성이 화면에 더해진다.

tip. template 속성을 사용한 경우 vs 사용하지 않은 경우  아래의 각각의 코드는 최종적으로 화면에 나타내는 결과는 동일하나, 인스턴스의 내용이 적용되는 시점만 다르다. 왼쪽은 먼저 <h3>{{ message }}</h3>를 화면에 표시하고, 인스턴스가 생성되면 message의 값을 Hello world!로 치환한다. 오른쪽 코드는 아무런 내용이 없다가 인스턴스가 생성되면 <h3>Hello world!</h3>가 화면에 그려진다.

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

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

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

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

데이터 바인딩

---

데이터 바인딩이란 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것이다.

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

• {{ }} - 콧수염 괄호

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

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

(콧수염 괄호를 사용한 데이터 바인딩 기법)

위 코드는 data 속성의 message 속성 값을 <div> 태그 안에 {{ message }}에 연결하여 화면에 표현하는 코드이다.

여기서 data 속성의 message 값이 변경되면 뷰 반응성에 의해 화면이 자동으로 갱신된다.

만약 뷰 반응성에 의해 데이터가 변경되어 표현되는 것을 방지하고 싶다면 v-once 속성을 추가해주면 된다.

(v-once 속성을 붙이면 데이터가 최초 1회만 바인딩된다.)

예제를 통해서 확인해보자.

(v-once 속성을 적용하지 않고 message 속성의 값을 변경했을 때)

v-once 속성을 적용하지 않고 뷰 인스턴스의 message 속성의 값을 변경할 경우 화면에 변경한 값이 반영이 된다.

(v-once 속성을 적용하고 message 속성의 값을 변경했을 때)

반면 v-once 속성을 태그에 적용할 경우 뷰 인스턴스의 message 속성의 값을 변경하더라도 화면에 반영이 되지 않는다.

• v-bind 속성

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

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

예제를 통해서 확인해보자.

(v-bind 속성을 사용하여 데이터를 바인딩하는 예제)

(v-bind 속성을 사용하여 데이터를 바인딩한 결과)

자바스크립트 표현식

---

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

데이터 바인딩 방법 중 콧수염 표현식을 이용한 데이터 바인딩 방식에 자바스크립트 표현식을 넣을 수 있다.

다음의 예제를 보면서 자세하게 알아보자.

(콧수염 표현식에 자바스크립트 표현식을 작성할 수 있는 예제)

(자바스크립트의 표현식이 반영된 결과)

콧수혐 표현식 안에서 자바스크립트 API나 문자열 더하기 등의 표현식을 사용하여 화면에 결과를 반영할 수 있다.

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

자바스크립트 표현식을 사용할 때 주의할 점이 두 가지 존재한다.

첫 번째 - 자바스크립트의 선언문과 분기 구문은 사용할 수 없다. 예) let a = 10;과 같은 변수 선언과 if문과 같은 분기 구문

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

(자바스크립트 표현식 사용 시 주의해야할 점)

디렉티브

---

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

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

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

동적인 웹 앱을 구현할 때 주로 사용되는 디렉티브는 다음과 같다.

디렉티브 이름	역할
v-if	지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.
v-for	지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력한다. (for in문)
v-show	v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.  단, v-if는 해당 태그를 완전히 삭제하지만 v-show는 css 효과로 display: none; 효과로 처리한다.
v-bind	HTML 태그의 기본 속성과 뷰 데이터 속성을 연결한다.
v-on	화면 요소의 이벤트를 감지하여 처리할 때 사용한다. 예를 들어, v-on:click은 해당 태그의 클릭 이벤트를 감지하여 특정 메소드를 실행시킨다.
v-model	form 태그에서 주로 사용되는 속성이다.  form에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다. <input>, <select>, <textarea> 태그에만 사용할 수 있다.

위의 디렉티브를 예제를 작성하여 사용해보자.

(디렉티브 속성을 사용한 예제)

(위의 예제 코드를 실행한 결과)

이벤트 처리

---

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

이벤트를 처리할 때 함수를 v-on디렉티브를 이용하여 [v-on:이벤트명 = "함수명"] 으로 연결할 수 있다.

여기서 함수를 정의하는 방식에 따라 인자를 함께 전달할 수도 있으며, DOM 요소를 전달할 수도 있다.

이벤트를 처리하는 예제를 직접 작성해보자.

(이벤트를 처리하는 예제)

(v-on 디렉티브로 클릭 이벤트를 연결하여 함수를 실행시켰을 때)

(v-on 디렉티브로 클릭 이벤트를 연결하고 함수에 2개의 인자를 전달하여 실행시켰을 때)

(v-on 디렉티브로 클릭 이벤트를 연결하고 함수에 DOM 요소를 전달하여 실행시켰을 때)

고급 템플릿 기법

---

고급 템플릿 기법은 실제 애플리케이션을 개발할 때 유용한 속성이다.

앞에서 배운 데이터 바인딩, 디렉티브와 같은 기본적인 문법과 함께 사용한다.

• computed 속성

데이터를 가공하는 등의 복잡한 연산은 뷰 인스턴스 안에서 하고 결과를 HTML에 데이터를 표현해야한다고 이야기했었다.

computed 속성은 이러한 데이터 연산들을 정의하는 영역이다.

(자바스크립트 표현식 파트 참고)

computed 속성의 첫 번째 장점은 data 속성 값의 변화에 따라 자동으로 다시 연산처리를 해준다는 것이다.

예를 들어, computed 속성에서 사용하고 있는 data 속성 값이 변경되면 전체 값을 다시 한번 계산한다.

두 번째 장점은 캐싱이다.

캐싱은 동일한 연산을 반복해서 하지 않기 위해 연산의 결과 값을 미리 저장하고 필요할 때 불러오는 동작이다.

만약 어떠한 값을 화면의 여러 곳에서 값을 표시해야 할 경우, 연산한 결과를 가지고 있다가 새로 연산하지 않고 가지고 있는 결과를 화면에 표시한다.

• computed 속성과 methods 속성의 차이점

두 속성의 차이점은 methods 속성은 호출할 때만 해당 로직이 수행되고, computed 속성은 대상 데이터의 값이 변경되면 자동적으로 수행된다는 것이다.

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

위의 내용을 예제를 통해 알아보자.

(methods 속성의 예제)

(methods 속성에 정의한 함수에 의하여 문자열이 역순으로 값이 바뀌어 치환된다.)

여기서 잊지 말아야 할 부분은 문자열 역순 처리하기 버튼을 클릭하여 methods 속성에 정의한 reverseMsg 메소드를 호출할 때 마다 역순을 처리하는 로직이 수행된다는 것이다.

반면 computed 속성의 예제를 작성하고 비교해보자.

(computed 속성 예제)

(computed 속성 예제 결과)

computed 속성의 특징은 한번 연산처리한 결과를 캐싱하여 기억해둔다는 것이다.

그리고 호출될 때 마다 기억해둔 결과 값을 재사용한다.

만약 data 속성의 값이 변경된다면, computed 속성의 reversedMsg 메소드가 재실행 된다.

만약 복잡한 연산을 반복해서 수행해야 한다면 computed 속성을 이용하는 것이 methods 속성을 이용하는 것 보다 성능 면에서 효율적이다.

• watch 속성

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

computed 속성과 비슷하지만 다른 점이 있는데, computed 속성은 내장 API를 활용하는 간단한 연산 처리에 적합하고, watch 속성은 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합하다.

watch 속성을 사용하는 예제를 작성해보자.

(watch 속성을 이용한 예제)

(위의 예제 코드의 결과)

위의 코드는 입력칸에 값을 v-model 디렉티브로 연결하여 입력한 값에 변화가 발생할 때 마다 watch 속성에서 변화된 값을 캐치하여 로직을 처리하는 코드이다.

watch에서 연결한 속성의 값의 상태가 변경될 때 마다 watch가 감지한다는 특징을 알 수 있다.

해당 내용은 'Do it! Vue.js 입문'을 참고하여 공부한 내용을 정리한 글입니다.