Watch
Vue는 Vue 인스턴스의 데이터 변경을 관찰하고 이에 반응하는 보다 일반적인 watch 속성을 제공한다. 다른 데이터 기반으로 변경할 필요가 있는 데이터가 있는 경우, Watch를 사용하는게 적합한 사용방식이라 할 수 있겠다.
watch 속성은 감시할 데이터를 지정하고 그 데이터가 바뀌면 이런 함수를 실행하라는 방식으로 소프트웨어 공학에서 이야기하는 ‘명령형 프로그래밍’ 방식. computed 속성은 계산해야 하는 목표 데이터를 정의하는 방식으로 소프트웨어 공학에서 이야기하는 ‘선언형 프로그래밍’ 방식에 속하며, 사용용도는 각기 다르다.
단순하게 보자면 watch는 '데이터'를 기반으로 관찰하며, 변화에 맞춰 여러 동작을 실행한다.
그러므로 watch를 쓰기위해선 데이터가 반드시 존재해야 하며, 데이터명을 함수명으로 반드시 동일하게 써야한다.
// 예제
export default{
data() {
return {
example : 10 //데이터가 반드시 존재해야 한다
}
},
watch: {
example() { //"데이터명 = 함수명"이며 데이터가 변화하지않으면 watch속성은 발동하지않는다.
if(this.example > 100){
alert("10배를 초과했습니다")
}
}
}
}SELECT + Watch를 활용한 데이터렌더링
적용화면
HTML
<template>
<div class="custom-div">
<select class="custom-select" v-model="optList">
<option value="tomonari">토모나리</option>
<option value="hiver">하이버</option>
<option value="musinsa">무신사</option>
</select>
<div class="info-box">
<ul class='info-list'>
<li><img :src="imgSrc" width=300px /></li>
<li>{{titleData}}</li>
<li>{{text}}</li>
</ul>
</div>
</div>
</template> HTML같은 경우 굉장히 간단하다.
select와 옵션을 활용해 선택할 수 있는 셀렉트 바를 만들어주고, v-model을 활용해
optlist라는 데이터와 바인딩해준다.
option의 경우 value명을 안써주면 태그안에 써있는 font(토모나리)가 value로 자동저장 되지만 옵션안에 value를 인라인으로 쓰게되면 value속성에 담겨있는 값이 value가 된다.
텍스트의 경우 vue의 데이터를 받으려면 중괄호 두개로 감싸면 된다.
img src같은 경우 src는 a태그에 속한다. a태그에 이미지 주소를 바인딩하려면 v-bind의 축약어인 :를 활용하면 좋다.
javascript
<script>
export default {
data() {
return {
optList:'tomonari',
items: {
tomonari: {
imgSrc : "https://image.auction.co.kr/itemimage/15/be/7b/15be7bd436.jpg",
titleData : "토모나리 : 2010년대 인기를 끌었던 재팬영스트릿 스타일 쇼핑몰",
text : "http://www.tomonari.co.kr/"
},
hiver: {
imgSrc: "https://www.venturesquare.net/wp-content/uploads/2019/03/hiver.jpg",
titleData: "하이버 : 남자를 위한 모든것이 있는 맨즈 종합커머스",
text: "www.hiver.co.kr"
},
musinsa: {
imgSrc: "https://image.musinsa.com/data/gift/2020100713381500000005521.jpg",
titleData: "말이 필요 없는 최고의 남성 종합 의류커머스",
text: "http://musinsa.com/"
}
},
imgSrc:'https://image.auction.co.kr/itemimage/15/be/7b/15be7bd436.jpg',
titleData:'토모나리 : 2010년대 인기를 끌었던 재팬영스트릿 스타일 쇼핑몰',
text:'http://www.tomonari.co.kr/'
}
},
watch: {
optList : function(listchange){
const itemname = this.optList
if(itemname){
this.imgSrc = this.items[itemname].imgSrc;
this.titleData = this.items[itemname].titleData;
this.text = this.items[itemname].text;
}
}
}
}
</script>실제로 watch를 활용해서 렌더링할 데이터는 items라는 객체다. 여기서 활용하는건 option value명을 통해 객체안에 있는 객체명에 접근하는 방식이다. option value명을 이미 items에 있는 또다른 객체명들인 tomonari, hiver, musinsa와 똑같이 통일 시켰기 때문에 optlist가 select태그를 통해 바뀐다면 아이템즈 객체도 똑같이 변화를 하며 각기 다른 이미지와 타이틀, 텍스트를 렌더링 하게 된다.
