Notice
Recent Posts
Recent Comments
초코레
뷰 템플릿 본문
뷰 템플릿이란?
- HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성
- 템플릿 속성을 사용하는 방법
- ES5에서 뷰 인스턴스의 template 속성을 활용한다.
- ES6에서 싱글 파일 컴포넌트 체계의 <template> 코드를 활용한다.
- 템플릿 속성의 특징
- 라이브러리 내부적으로 template 속성에서 정의한 마크업과 뷰 데이터를 가상 돔 기반의 render() 함수로 변환한다.
- 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 한다.
- 변환 과정에서 뷰의 반응성이 화면에 더해진다.
- 템플릿에서 사용하는 뷰의 속성과 문법
- 데이터 바인딩
- 자바스크립트 표현식
- 디렉티브
- 이벤트 처리
- 고급 템플릿 기법
데이터 바인딩 (Data Binding)
- HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것
- {{ }} 문법과 v-bind 속성이 있다.
- {{ }} (콧수염 괄호)
- 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식
- 만약 data 속성 값이 바뀌면 뷰 반응성에 의해 화면이 자동으로 갱신된다.
- 만약 뷰 데이터가 변경되어도 값을 바꾸고 싶지 않다면 el 로 지정한 태그에 v-once 속성을 사용한다.
|
1
2
3
|
<div id="app" v-once>
{{ message }}
</div>
|
cs |
- v-bind 속성
- id, class, style 등의 HTML 속성(attributes) 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식
- 형식은 v-bind 속성으로 지정할 HTML 속성이나 props 속성 앞에 접두사로 붙여준다. ex) v-bind:id="id값"
- v-bind: 문법을 :로 간소화할 수도 있다. (ex) v-bind:id와 :id는 같은 동작)
자바스크립트 표현식
- 뷰 템플릿에도 자바스크립트 표현식을 쓸 수 있는 데, 데이터 바인딩 방법 중 하나인 {{ }} 안에 자바스크립트 표현식을 넣으면 된다. ex) {{ message + "!!!" }}
- 주의할 점은 자바스크립트의 선언문(ex) var a = 10;)과 분기 구문(if문)은 사용할 수 없고, 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야 한다.
- 만약 분기 구문과 동일한 로직을 처리하고 싶으면 자바스크립트의 삼항 연산자를 사용한다.
- 복잡한 연산은 인스턴스 안에서 처리해야 화면단 코드의 가독성을 높일 수 있으며, 반복적인 연산에 대해서는 미리 계산하여 저장해 놓고 필요할 때 바로 불러오는 캐싱(caching) 효과를 얻을 수 있다. (computed 속성의 캐싱 효과)
디렉티브 (Directive)
- HTML 태그 안에 v-접두사를 가지는 모든 속성을 의미한다.
- 디렉티브는 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능이다.
- 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터 값에 따라 갱신된다. (화면의 요소를 직접 제어할 필요 X)
- 주요 디렉티브
- v-if / v-else : 지정한 뷰 데이터 값의 참/거짓 여부에 따라 HTML 태그를 표시하거나 표시하지 않는다.
- v-for
- v-show : v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. 다만, v-if는 해당 태그를 완전히 삭제하지만 v-show는 css 효과만 display:none;으로 주어 실제 태그는 남아 있고 화면 상으로만 보이지 않는다.
- v-bind : HTML 태그의 기본 속성과 뷰 데이터 속성을 연결한다.
- v-on : 화면 요소의 이벤트를 감지하여 처리할 때 사용한다. ex) @click, @keyup, @keypress, @keyup.enter 등
- v-model : 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장하여 서버로 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다. <input>, <select>, <textarea> 태그에만 사요할 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>
<!-- 약어 -->
<a :href="url"> ... </a>
<!-- shorthand with dynamic argument (2.6.0+) -->
<a :[key]="url"> ... </a>
<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>
<!-- 약어 -->
<a @click="doSomething"> ... </a>
<!-- shorthand with dynamic argument (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
|
cs |
이벤트 처리
- 화면에서 발생한 이벤트를 처리하기 위해 v-on 디렉티브와 methods 속성을 활용한다.
- v-on 디렉티브로 메서드를 호출할 때 인자 값을 넘길 수도 있다.
- event 인자를 이용해 화면 요소의 돔 이벤트에 접근할 수 있다.
|
1
2
3
4
5
6
7
8
9
|
<button v-on:click="clickBtn(10)">클릭</button>
...
<script>
methods: {
clickBtn: function(num) {
alert('clicked' + num);
}
}
</script>
|
cs |
고급 템플릿 기법
- computed 속성
- 데이터 연산들을 정의하는 영역
- 장점은 data 속성 값이 변경되면 자동으로 다시 연산하는 점과 캐싱이다.
- computed 속성 vs methods 속성 : methods 속성은 호출할 때만 해당 로직이 수행되고, computed 속성은 대상 데이터 값이 변경되면 자동으로 수행된다. 캐싱 면에서 볼 때 methods 속성은 수행할 때마다 연산을 하기 때문에 별도로 캐싱을 하지 않지만, computed 속성은 데이터가 변경되지 않는 한 이전의 계산 값을 가지고 있다가(캐싱하고 있다가) 필요할 때 바로 반환해 준다.
- 주의점 : computed 속성은 인자를 받지 않는다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<div id="app">
<p>{{ reversedMessage }}</p>
</div>
...
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('');
}
}
});
</script>
|
cs |
- watch 속성
- 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다.
- computed 속성 vs watch 속성
- computed 속성은 내장 API를 활용한 간단한 연산 정도에 적합하지만 (캐싱), watch 속성은 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합하다.
- computed vs watch 공식 문서
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<html>
<head>
<title>Vue Template - Watch</title>
</head>
<body>
<div id="app">
<input v-model="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
watch: {
message: function(data) {
console.log("message의 값이 바뀝니다 : ", data);
}
}
});
</script>
</body>
</html>
|
cs |
- v-model 디렉티브 : 앵귤러의 양방향 데이터 바인딩을 본따 만든 뷰의 기능. 화면단의 데이터를 스크립트 단의 특정 데이터와 일치시켜 준다.
싱글 파일 컴포넌트(Single File Components) 체계
- HTML 파일에서 뷰 코드 작성 시의 한계점 : <script> 태그 안에서 HTML 코드는 구문 강조가 적용되지 않기 떄문에 오탈자를 찾기 어렵다. 또한 코드 들여쓰기도 어려워 상위 태그와 하위 태그의 관계를 파악하기가 어렵다.
- 이를 해결하기 위해 위에서 말한 싱글 파일 컴포넌트 체계는 .vue 파일로 프로젝트 구조를 구성하는 방식을 말한다.
- 확장자 .vue 파일 1개는 1개의 컴포넌트와 동일하다.
- .vue 파일은 아래와 같은 기본 구조를 가진다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<template>
<!-- 화면에 표시할 요소들을 정의하는 영역
HTML + 뷰 데이터 바인딩 -->
</template>
<script>
//컴포넌트의 내용을 정의하는 영역
//template, data, methods 등
//ES6의 자바스크립트 모듈화와 관련된 문법
</script>
<style>
/* 템플릿에 추가한 HTML 태그의 CSS 스타일을 정의하는 영역 */
</style>
|
cs |
- 싱글 파일 컴포넌트 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 웹팩(Webpack)이나 브라우저리파이(Browserify)와 같은 도구가 필요하다.
- 이를 위해 뷰 개발자들이 편하게 프로젝트를 구성할 수 있도록 CLI(Command Line Interface, 커맨트 창에서 명령어로 특정 동작을 수행할 수 있는 도구) 도구를 제공한다.
- 뷰 CLI 명령어로 실행할 수 있는 프로젝트 템플릿을 보면 웹 팩이나 브라우저리파이 같은 모듈 번들러를 프로젝트 자체에 포함하여 바로 사용할 수 있으며, .vue 파일을 HTML, CSS, 자바스크립트 파일로 변환해 주기 위한 뷰 로더를 포함하고 있다.
- 모듈 번들러 : 서로 의존 관계가 있는 모듈을 하나의 파일로 묶어 주는 도구
- 뷰 로더(Vue Loader) : 웹 팩에서 지원하는 라이브러리. 싱글 파일 컴포넌트 체계에서 사용하는 .vue 파일의 내용을 브라우저에서 실행 가능한 웹 페이지의 형태로 변환해 준다. 웹 팩 설정 파일(webpack.config.js)의 뷰 로더 속성에서 확인할 수 있다.
- 주의점
- <template> 안에 최상위 html 태그는 1개여야 한다.
- data 속성은 다른 곳에서 참조하면 안 되기 때문에 함수를 연결해주고 return으로 새 객체를 리턴하는 문법을 따른다.
- html 표준 태그와 구분하기 위해 컴포넌트 이름은 2단어 이상으로 조합해야 한다.