[Vue.js] Vue.js watch를 통한 디바운싱 적용하기

자바스크립트에서의 디바운싱, 쓰로틀링에 대한 개념이 궁금하시다면 아래 링크를 참고해주세요. :-)

[Javascript] 쓰로틀링, 디바운싱(throttling, debouncing)?

 

회사에서 프로젝를 진행하다보니, Vue.js에서 debounce를 사용할 일이 생겼다.

아마도 대체적으로는 이벤트리스너에 debounce나 throttling을 붙여서 사용할 것으로 예상된다.

 

하지만, 내가 사용하고 있는 환경은 Vue.js이고 데이터 변화가 감지됐을 때, 트리거를 하고 싶었다.

사실 scroll 이벤트리스너로 했으면 되겠지만, 최대한 사용하고 있는 프레임워크에 잘 붙여보고 싶었던 생각이 크다.

---

일반적인 사용

 

lodash를 사용하고 있고 프레임워크를 신경쓰지 않았다면, 아마도 아래와 같은 코드를 통해서 debounce 또는 throttling을 쓸 것이다.

const myFunction = _.debounce(function() {
	// Any Logic for your application.
}, 250);

const input = document.querySelector('input');

input.addEventListener('input', myFunction);

 

하지만, Vue.js를 쓰고 있는 환경이기 때문에 아마도,,, 아래의 예시처럼 사용하지 않았을까?

mounted () {
  const input = document.querySelector('input');
  input.addEventListener('input', this.myFunction);
},
methods: {
 myFunction() {
  _.debounce(function() {
  	// Any Logic for your application.
  }, 250);
 },
 ...
},
...

 

각 개발자의 성향이 있지만, 나는 addEventListener나 setInterval과 같은 함수들의 사용을 귀찮아한다.

올바른 상황에 다시 제거해주는 것도 필요하기 때문이다.

 

---

Vue.js 그리고 watch

 

앞서 이야기했지만, React를 사용하든, Vue를 사용하든, 가능하다면 최대한 해당 프레임워크에서 해결하려는 편이다.

 

그래서 잠깐 고민을 하다가, 문득 생각이 났다. 

Vue.js에서는 주로 input에 v-model를 통한 데이터 양바인딩을 사용하고 있다.

그리고 watch라는 기능을 통해 데이터 변화를 감지할 수 있다. 아래의 예시처럼!

 

<template>
  <div> 
    <input type="text" v-model="inputData">
  </div>
</template>


<script>
export default {
  data () {
    return {
     inputData: ''
    }
  },
  watch: {
   inputData: (newVal, oldVal) {
    console.log(newVal, oldVal);
   },
   ...
  },
  ...
  }
</script>

 

watch를 아직 잘 모른다면 아래의 공식 도큐먼트를 통해 다시 보고 오자!

Computed Properties and Watchers — Vue.js

 

---

Vue.js 그리고 watch 그리고 debouncing (Fail - 실패)

 

Vue.js에서 Input 데이터를 watch하게 되면, 결국 debounce, throttling이 생각난다... 아주 생각난다...

사용자가 input tag에 데이터를 타이핑할 때마다 로직을 돌리기에 부담스러울때 특히!

 

그래서 watch에 debounce를 어떻게 먹여볼까 고민했다.

newVal, oldVal 둘 다 써야할 상황이었기에 아래처럼 사용해보고 싶었다...

 

<template>
  <div> 
    <input type="text" v-model="inputData">
  </div>
</template>


<script>
export default {

  data () {
    return {
     inputData: ''
    }
  },
  watch: {
   inputData: (newVal, oldVal) {
    _.debounce(function(newVal, oldVal) {
    	// Any Logic for your application.
        console.log(newVal, oldVal)
    }, 250);
   },
   ...
  },
  ...
  
}
</script>

 

---

Vue.js 그리고 watch 그리고 debouncing (Solution)

 

위의 예시가 통하지 않는 이유는 자세히 알아봐야할 숙제가 되었다. (아마도 callback이나 scope에서 이슈가 생기지 않았을까)

 

개발자 커뮤니티가 working하는 예시로 아래와 같은 방법을 찾을 수 있었다.

watch될 데이터에 바로 Lodash - debounce를 붙이는 것이다.

 

eventListener를 따로 created나 mounted에 생성하지 않고, Vue.js에서 제공하는 watch 기능을 통해 간단히 debounce를 연결할 수 있었다. :-) 

 

주로 Lodash의 debounce, throttling을 사용할 것으로 예상한다. 하지만, custom 함수로 직접 만들어 쓴다면, 아마도 fail한 코드에서 사용할 수 있을 것으로 생각된다.

<template>
  <div> 
    <input type="text" v-model="inputData">
  </div>
</template>


<script>
export default {

  data () {
    return {
     inputData: ''
    }
  },
  watch: {
   inputData: _.debounce(function(newVal, oldVal) {
    	// Any Logic for your application.
        console.log(newVal, oldVal)
    }, 250)
   ...
  },
  ...
  
}
</script>

 

 

 

 

---

참고

www.it-swarm.dev/ko/vue.js/vue2에서-디-바운스-debounce를-구현하는-방법은-무엇입니까/829922968/