[Vue3] lodash debounce 메서드 vue에서 사용하는 방법

debounce()는 특정 기간 동안 반복된 함수 호출을 마지막 1회만 호출하도록 제어해주는 메서드다.

 

1. debounce 메서드 Vue 3에서 사용법

 

1-1. lodash를 install 해주었다고 가정하고, import를 한다.

 

import {debounce} from 'lodash';

 

1-2. 기본적인 사용 방법

debounce 는 두 개의 인자를 받는다. 첫 번째는 콜백 함수, 두 번째는 시간(밀리세컨드)이다. 

 

const fetchList = () => {
	// 데이터 불러오는 로직
}

debounce(fetchList(), 300)

 

1-3. Vue3 라이프사이클에 적용하기

자 그럼 이걸 언제 쓰는지 직접 작성했던 vue3 기반 프로젝트를 참고하여 기록해보려 한다.

 

computed: {
	isScrolledBottom(): boolean {
    	// 페이지의 적당한 하단 부분까지 스크롤함을 인지하는 로직
    }
},
methods: {
	async fetchList() {
    	// 리스트를 불러오는 로직
    },
    scrollBottomHandler() {
    	if (this.isScrolledBottom) {
        	this.fetchList()
        }
    }
}

 

우리 프로젝트에서 리스트를 거의(400px 정도 남긴 시점) 최하단까지 스크롤한 시점에서, 다음 리스트를 fetch해오도록 하는 기능을 구현했다. 최하단까지 스크롤한 다음 데이터를 받아오려고 하면, 사용자가 최하단까지 스크롤하지 않고 다음 리스트를 기다리거나, 새로운 데이터를 응답받는 데 딜레이가 생길 것 같아, 페이지 최하단에서 400px를 남긴 시점에서 요청하도록 했다.

 

mounted() {
	this.debounceFunc = debounce(this.scrollBottomHandler(), 300);
    	window.addEventListener('scroll', this.debounceFunc);
},
beforeUnmounted() {
	window.removeEventListener('scroll', this.debounceFunc);
}

 

 

2. 그 외 debounce 사용 예시

 

스크롤 시, 단순히 스크롤값의 변동을 인지할 때마다 서버에 데이터를 요청하면, 스크롤 픽셀이 변경되는 모든 시점에서 수많은 요청 횟수를 피할 수 없다. 하지만 위와 같이 debounce로 감싸서, 콜백 함수를 300ms 동안 일어난 요청 중 마지막 요청만 유효하도록 만들어 주면 클라이언트 및 서버 모두에서 성능향상을 기대할 수 있다. 

 

일정 시간 동안 반복된 똑같은 함수 호출을 강제로 막았다가 마지막에만 호출하도록 하는 이 debounce의 기능은 사용자가 input 입력을 진행할 때도 적용할 수 있다. 이 외에도 브라우저 사이즈 조절에 따라 호출되는 메서드가 있다면 마찬가지로 debounce가 의미 있게 쓰일 것이다.