Debouncing
디바운싱(Debouncing)은 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 한다.
특정시간이 지날때까지 재반복이 일어나지 않는 경우 1번만 실행이 된다.
디바운싱은 주로 검색 부분을 만들때 사용된다.
사용방법
디바운싱은 lodah에 라이브러리 메소드를 사용하면 편하게 사용가능하다.
const onChageSearch = (event) => {
getDebounce(event.target.value);
};
const getDebounce = _.debounce((data) => {
refetch({ search: data, page: 1 });
}, 400); // 시간 입력
return 검색어입력: <input type="text" onChange={onChageSearch} />위 코드를 보면 input태그에 들어오는 밸류가 들어올때마다 리패치가 진행되어 API를 요청한다고 생각하면 낭비가 심하다.
그래서 lodash에서 제공해주는 debounce()메소드를 사용하여 제한을 두게 되면 불필요한 낭비가 없어지게 된다.
보통 웹사이트를 이용하는 사람들은 검색할 것을 생각을 하고 한번에 타이핑을 하게 된다.
생각을 하더라도 문자 하나 하나 생각하지는 않을것이고, 생각하는 시간 또한 길지 않을 것 이다.
그래서 위 코드와 같이 시간에 제한을 주게 되면 이벤트가 발생하여도 지정해준 시간동안 즉 200ms 동안 함수를 실행하지 않게 되고 그 시간이 지나면 함수가 실행이 되어 그 때 API가 요청이 된다.
Throttling
쓰로틀링(Throttling)은 디바운싱과 반대로 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 한다.
먼저 1번 실행이 되고 특정시간동안은 이벤트가 발생하더라도 특정시간동안 무시한다.
쓰로틀링은 주로 무한스크롤에 사용된다.
무한스크롤은 아주 미세하게 조금씩 내릴때마다 API요청을 하게 되는데 그때 리패치가 매우 많이 발생하게 된다.
이를 방지하기 위해 쓰로틀링을 사용을 해야 한다.
쓰로틀링은 보통 setTimeout()메소드를 사용을 한다.
자주 사용하는 무한스크롤 라이브러리에도 내장되어 있는 기능이다.
