[Hoon] Vuejs 강의 - computed 와 watch

computed 와 watch

https://kr.vuejs.org/v2/guide/computed.html

이번 시간에는 Vue 의 강력한 속성인 computed 와 watch 에 대해서 알아보도록 하겠습니다. 앞에서 Vue 가 angularjs 비해서 훨씬 빠르고, react 보다 조금 더 빠르다고 비교를 했었는데요. 이 computed 와 watch 를 잘 활용해야지만 그러한 결과를 만들 수 있습니다.

1. computed 속성

앞에서 본 템플릿 내에 표현식을 넣는 방식은 편리하지만, 간단한 연산일 때만 이용하는 것이 좋습니다.
너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵습니다. 그래서 Vue 는 computed 라는 속성을 제공합니다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
   <p>{{ message.split('').reverse().join('') }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: '안녕하세요'
  }
})

# 기본 예제

<div id="app">
  <p>{{ message }}</p>
  <p>{{ reversedMessage }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요'
  },
  computed: {
    // 계산된 getter
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

여기서 중요한 것은 선언적으로 의존 관계를 만들었다는 것입니다.
computed 속성의 getter 함수는 사이드 이펙트가 없어 코드를 테스트하고 이해하기 쉽습니다.

# computed 속성의 캐싱 vs 메소드

표현식에서 메소드를 호출하여 같은 결과를 얻을 수도 있습니다.

<p>{{ reversedMessage() }}</p>

new Vue({
  el: '#app',
  data: {
    message: '안녕하세요'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage: function () {
        return this.message.split('').reverse().join('')
    }
  }
})

<p>{{ now1 }}, {{ now2() }}</p>
<button v-on:click="addMessage">추가</button>
<p> {{ addedMessage }} </p>

new Vue({
  el: '#app',
  data: {
    addedMessage: ''
  },
  computed: {
   now1: function () {
        return Date.now()
    }
  },
  methods: {
    now2: function () {
        return Date.now()
    },
    addMessage: function(){
        this.addedMessage = this.now1 +' , ' + this.now2()
    }
  }
})

computed 속성 대신 메소드와 같은 함수를 정의할 수도 있습니다. 최종 결과에 대해 두 가지 접근 방식은 서로 동일합니다. 차이점은 computed 속성은 종속 대상을 따라 캐싱된다는 것 입니다. computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행합니다.
즉 message가 변경되지 않는 한, computed 속성인 reversedMessage를 여러 번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환합니다.

또한 Date.now()처럼 아무 곳에도 의존하지 않는 computed 속성의 경우 절대로 업데이트되지 않습니다.
이에 비해 메소드를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행합니다.

# computed 속성 vs watch 속성

Vue는 Vue 인스턴스의 데이터 변경을 관찰하고 이에 반응하는 watch 속성을 제공합니다. 하지만 watch 콜백보다 computed 속성을 사용하는 것이 더 좋습니다.

watch 속성(명령형 프로그램 방식) - 감시할 데이터를 지정하고 그 데이터가 바뀌면 이런 함수를 실행하라는 방식
computed 속성(선언형 프로그래밍 방식) - 계산해야 하는 목표 데이터를 정의하는 방식

<div id="app">{{ fullName }}</div>

new Vue({
  el: '#app',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

이 watch 이용한 코드는 명령형이고 또 코드를 반복합니다.
computed 속성을 사용하는 방식과 비교해 보겠습니다.

new Vue({
  el: '#app',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

# computed 속성의 setter 함수

computed 속성은 기본적으로 getter 함수만 가지고 있지만, 필요한 경우 setter 함수를 만들어 쓸 수 있습니다.

new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: {
        // getter
        get: function () {
            return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
  }
})

vm.fullName = 'John Doe'를 실행하면 set 호출되고 vm.firstName과 vm.lastName이 그에 따라 업데이트 됩니다.

2. watch 속성

사용자가 만든 감시자가 필요한 경우가 있습니다. 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 유용합니다.

<div id="app">
  <p>
    yes/no 질문 :
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    question: '',
    answer: '질문을 먼저 ...'
  },
  watch: {
    // 질문이 변경될 때 마다 이 기능이 실행됩니다.
    question: function (newQuestion) {
      this.answer = '입력을 ...'
      this.getAnswer()
    }
  },
  methods: {
  	getAnswer: function(){
			if(this.question.indexOf('?') === -1){
      	this.answer = '질문에는 물음표가.'
        return
      }
      this,answer = '생각중...'
      var self = this
      axios.get('https://yesno.wtf/api')
      	.then(function (response){
        	self.answer = response.data.answer          
        })
        .catch(function (error){
        	self.answer = '에러! '+  error
        })        
    }
  }
})
</script>

이 경우 watch 옵션을 사용하면 비동기 연산 (API 엑세스)을 수행하고, 최종 응답을 얻을 때까지 중간 상태를 설정할 수 있습니다. computed 속성은 이러한 비동기 연산 기능을 수행할 수 없습니다.

watch 옵션 외에도 명령형 vm.$watch API를 사용할 수 있습니다.

bit.ly/3fXOzon

인프런 인강 선착순 30% 마지막 할인 쿠폰 - Vue.js 핵심 강의!

bit.ly/2TtRHis

[Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런