1. Debouncing
디바운싱이란, 연이어 발생한 이벤트를 하나의 그룹으로 묶어 처리하는 방식으로
주로 그룹에서 마지막 혹은 처음에 처리된 함수를 처리하는 방식으로 사용된다.
마지막 호출이 발생한 후 일정 시간이 지날때까지 추가적 입력이 없을 때 실행된다.
디바운싱이 사용되는 대표적 예제로는 검색기능이 있다.
디바운싱을 사용하지 않고 실시간으로 입력된 값을 자동으로 검색해주는 기능을 구현하면
아래와 같이 검색어를 입력할 때마다 엄청나게 많은 요청을 하기에 비효율적이다.
디바운싱 : 특정작업을 할 떄 특정시간 내에 다시 그 작업이 반복되지 않으면 마지막에 한번 실행하는 것.
ex) 실시간으로 입력된 값 자동검색
2. Throttling
쓰로틀링이란, 연이어 발생한 이벤트에 대해 일정한 delay를 포함시켜 연속적으로 발생하는 이벤트는 무시하는 방식으로 사용된다.
즉, 지정한 delay동안 호출된 함수는 무시한다.
쓰로틀링이 사용되는 대표적 예제로는 무한 스크롤 기능이 있다.
유튜브에서 댓글을 볼때 브라우저에서 스크롤을 내릴 때마다
댓글을 추가로 보여주는 기능을 접한 적이 있을 것이다.
우리가 스크롤을 내릴 때 동작은 한 번일지라도 실제 브라우저에서는
수 많은 스크롤을 감지한다.
때문에 이를 고려하지 않고 댓글을 보여주는 기능을 구현하면
스크롤 동작한번에 엄청난 양의 댓글들이 쏟아져 순차적으로 댓글을 읽기 힘들 것이다.
하지만 쓰로틀링을 적용하면 처음 요청만 실행하고 일정 delay동안 호출된 함수는 무시하기 때문에 우리는 편하게 스크롤을 내리고 댓글을 읽을 수 있다.
쓰로틀링 : 디바운싱의 반대되는 개념으로 먼저 1번 실행하고 특정시간 동안 무시하는 것.
ex) 무한스크롤
3. Lodash 디바운싱 구현
Lodash 라이브러리를 사용하면 디바운싱을 쉽게 구현할 수 있다.
Lodash에는 디바운싱 외에도 내장되어 있는 유용한 함수가 많기 때문에
다방면으로 유용하게 사용할 수 있다.
일단 패키지를 설치하자.
yarn add lodash
타입스크립트를 사용한다면 아래 패키지도 설치가 필요하다.
yarn add @types/lodash --dev
- 디바운싱 맛보기.
import _ from "lodash";
export default function Test() {
const getDebounce = _.debounce((data) => {
console.log(e.target.value)
}, 500)
return (
<>
<input onChange={getDebounce}></input>
</>
)
}Debounce는 setTimeout과 사용방법이 같다.
debounce(콜백함수,시간) 첫 번째 인자로는 실행시키고 싶은 함수가 들어가고, 두 번째 인자로는 시간이 들어간다.
그리고 우리가 두 번째 인자로 넣어준 시간 동안 아무 일도 하지 않았을 때 콜백함수를 실행시킨다.
그리하여 우리가 무언가를 계속 입력하고 있으면 함수를 실행시키지 않고, 우리가 입력을 끝내고 가만히 지정한 시간이 지나면 그때 함수를 실행한다.
