뷰 메서드 (Vue Method)
뷰의 메서드는 특정 기능 별로 묶을 수 있는 자바스크립트 함수를 의미한다.
메서드는 흔히 뷰 템플릿의 버튼 이벤트 처리부터 HTTP 통신까지 다양한 성격의 코드로 구성된다.
메서드 코드 형식
메서드를 선언하는 방법은 아래와 같다.
new Vue({
methods: {
// ..
}
})메서드 예시 - 기본
메서드를 이용해서 버튼 클릭 이벤트를 처리하면 다음과 같다.
<button v-bind:click="clickButton">click me</button>new Vue({
methods: {
clickButton() {
alert('clicked');
}
}
})위의 click me 버튼을 클릭하면 경고창이 뜨면서 clicked 라는 메세지가 표시된다.
메서드 예시 - 응용
메서드의 내용에는 단순히 화면 조작을 위한 기능 뿐만 아니라 특정 로직을 담아놓는 장소로도 활용할 수 있다.
<button v-bind:click="displayProducts">Refresh</button>new Vue({
data: {
products: []
},
methods: {
displayProducts() {
this.fetchData();
// ..
},
fetchData() {
axios.get('/products').then(function(response) {
this.products = response.data;
}).catch(function(error) {
alert(error);
})
}
}
})Refresh 버튼을 클릭하고 나면 displayProducts() 메서드가 fetchData()를 호출한다.
이런 식으로 메서드를 연결해서 사용할 수도 있으며 이렇게 하면 특정 기능 별로 메서드를 분리할 수 있어 코드를 중복해서 작성하지 않고 재활용하기가 수월해진다.
computed 속성
컴퓨티드(computed) 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성이다.
computed 속성 예시
<div>{{ message.split('').reverse().join('') }}</div>위 코드는 message라는 데이터 속성의 문자열 순서를 역으로 변환해주는 코드이다.
message 값이 만약 Hello라면 화면에 출력되는 값은 olleH이다.
이처럼 콧수염 괄호 안에서 단순히 데이터 속성의 값만 표시하는게 아니라 자바스크립트의 내장 API를 활용하여 어느 정도 가공할 수 있다.
이와 같은 계산식이 템플릿이 많아지면 템플릿의 가독성이 현저히 떨어지게 돼서 computed 속성을 활용해야 한다.
computed: {
reverseMessage() {
return this.message.split('').reverse().join('');
}
}문자열을 역으로 변환하는 로직을 컴퓨티드 속성에 정의했기 때문에 최종적으로 화면에는 아래와 같이 구현하면 된다.
<div>{{ reverseMessage }}</div>computed 속성의 장점
컴퓨티드 속성은 단순히 뷰 템플릿 코드의 가독성만 높여줄 뿐만 아니라 컴퓨티드 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해주는 장점이 있다.
앞에서 살펴본 코드에서 message 값을 Hello Vue.js로 바꾸는 순간 컴퓨티드 속성은 다시 연산을 해서 화면에 sj.euV olleH를 표시해준다.
computed 속성 주의 사항
- 컴퓨터드 속성은 인자를 받지 않는다. (받으면 정상적인 출력이 안되고 오류가 난다)
- HTTP 통신과 같이 컴퓨팅 리소스가 많이 필요한 로직은 정의하지 않는다.
data: {
message: ''
},
computed: {
reverseMessage() {
const vm = this;
axios.get('/message').then(function(response) {
vm.message = response.data;
});
return this.message.split('').reverse().join('');
}
}컴퓨티드 속성에 HTTP 통신과 같은 비싼 비용의 코드를 넣는 경우가 있다.
기본적으로 컴퓨티드 속성은 템플릿 코드의 가독성을 위한 기능이며 HTTP 통신과 같이 브라우저 리소스가 많이 할애되는 코드들은 watch나 methods에 넣는 것이 적합하다.
watch 속성
watch 속성은 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성이다.
watch 코드 형식
new Vue({
data() {
return {
message: 'Hello'
}
},
watch: {
message: function(value, oldValue) {
console.log(value);
}
}
})위 코드는 message라는 데이터에 watch 속성을 지정한 코드이다.
message의 데이터가 변할 때마다 watch 속성에 정의한 message 함수가 실행되면서 콘솔에 변한 데이터를 출력한다.
watch 실용 문법
앞의 예시에서 살펴본 기본적인 문법 말고도 아래와 같이 다양한 형태로 watch 속성을 구현할 수 있다.
- watch 속성에 메서드 함수를 연결
whatch 대상 속성에 함수를 연결하는 대신 메서드 함수를 연결할 수 있다.
new Vue({
data() {
return {
message: 'Hello'
}
},
methods: {
logMessage() {
console.log(this.message);
}
},
watch: {
'message': 'logMessage' // 대상 속성과 메서드 함수를 매칭
}
})- 핸들러와 초기 실행 옵션
watch 대상 속성에 아래와 같이handler()와immediate속성을 정의할 수 있다.
new Vue({
data() {
return {
message: 'Hello'
}
},
watch: {
'message': {
handler(value, oldValue) {
console.log(value);
},
immediate: true, // 컴포넌가 생성되자마자 즉시 실행
}
}
})뷰 필터
뷰의 필터는 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능이다.
가장 간단하게는 단어의 대문자화부터 다국어, 국제 통화 표시 등 다양하게 사용할 수 있다.
필터 사용 방법
<div id="app">
{{ message | captinalize }}
</div>new Vue({
el: '#app',
data: (
message: 'hello'
),
filter: {
copitalize: function(value) {
if (!value) return ''
value = value.toString();
retuirn value.charAt(0).toUpperCase() + value.slice(1);
}
}
})위의 코드가 실행되면 Hello 텍스트가 화면에 출력된다.
필터를 쓰지 않았다면 heelo가 출력된다.
필터 등록 패턴
filters 속성을 이용하여 각 컴포넌트에 필터를 등록하는 방법도 있지만, 실제로는 대부분 filter.js파일을 따로 분리하여 사용한다.
// filters.js
export function caplitalize() {
// ..
}
export function translate() {
// ..
}// main.js
import Vue from 'vue';
import * as filters from 'filters.js';
Object.keys(filters).forEach(function(key) {
Vue.filter(key, filters[key]);
})
new Vue({
// ..
})Form 다루기
폼(Form)은 웹 애플리케이션에서 가장 많이 사용되는 코드 형식이다.
로그인이나 상품 결제 등 모든 곳에 사용자의 입력을 처리한느 폼이 필요하다.
Form 제작하기
- HTML 태그 구성
<form>
<div>
<label for="email">Email</label>
<input id="email" type="text">
</div>
<div>
<label for="password">Password</label>
<input id="password" type="password">
</div>
<div>
<button type="submit">Login</button>
</div>
</form>- HTML 태그에 뷰 속성 추가
<form v-on:submit.prevent="loginUser">
<div>
<label for="email">Email</label>
<input id="email" type="text" ref="email">
</div>
<div>
<label for="password">Password</label>
<input id="password" type="password" ref="password">
</div>
<div>
<button type="submit">Login</button>
</div>
</form>각 인풋 박스의 입력 값을 가져오기 위해 ref 속성을 사용하였고, 로그인 버튼을 눌렀을 때의 처리를 위해 v-on:submit 디렉티브를 사용한다.
.prevent는 폼의 기본적인 동작을 막기 위한 modifier로써 흔히 사용하는 event.preventDefault() 코드와 같은 효과를 가진다.
- 로그인 버튼을 눌렀을 때의 처리
new Vue({
methods: {
loginUser() {
var email = this.$refs.email.value;
var password = this.$refs.password.value;
axios.post('/login', {
email: email,
password: password
});
}
}
})이메일과 비밀번호 값을 받아 HTTP POST 요청을 날려서 로그인 인증 과정을 거친다.
Form Validation
폼에서 꼭 해줘야 하는 작업은 사용자의 입력이 유효한지 검사하는 작업이다.
뷰에서는 vee-validate, Vuelidate 등의 라이브러리로 폼의 유효성 검사를 할 수 있다.
라이브러리를 사용하는 것 이외에도 뷰의 기본 속성을 활용해서 아래와 같이 간단하게 유효성 검사를 할 수 있다.
<div>
<label for="email">email</label>
<input id="email" v-model="email" type="text">
</div>new Vue({
data: {
email: ''
}
})인풋 박스의 입력 값은 모두 v-model 디렉티브를 이용하여 email 이라는 뷰 인스턴스 데이터에 연결한다.
만약 이 인풋 박스에 최소 10글자 이상 입력해야 하는 조건을 넣는다면 다음과 같다.
<div>
<label for="email">email</label>
<input id="email" v-model="email" type="text">
<small>{{ emailValidation }}</small>
</div>new Vue({
data: {
email: ''
},
computed: {
emailValidation: function() {
return this.email.length > 10 ? `` : `Length must be over 10`;
}
}
})위와 같이 삼향 연산자를 이용해서 글자가 10개 이하면 계속 경고 표시가 뜨는 computed 속성을 구현하면 된다.
10글자 이하일 때는 계속 small 태그 안에 글자의 길이가 10 이상이어야 한다는 안내 문자가 표시된다.
