Throttling & Debouncing

Throttling

-. 최초입력을 기준으로, 특정시간 이내에 발생한 추가 입력을 무시하는 것
ex) 무한스크롤
아직 활용하여 코드를 만들어 본 적이 없어서 추후에 수정할 것'

---

debouncing

-. 마지막 변화를 기준으로, 특정시간 이내에 추가적인 변화가 없으면 1번 실행하는 것
ex) 검색 디바운싱

• 검색 디바운싱 코드

import _ from "lodash"; 
// lodash에서 debounce 끌어와 쓰기 꼭 _으로 끌어올 필요는 없지만 암묵적으로 _를 사용한다

export default function Debouncing() {
  
   const getDebounce = _.debounce((value) => {
    void refetch({ search: value, page: 1 });
  }, 500);
  // 검색과 페이지가 있는 gql을 사용했다는 가정하에 0.5초 안에 재입력이 없으면 검색값과 페이지로 refetch된다

 const onChangeSearch = (event: ChangeEvent<HTMLInputElement>) => {
    getDebounce(event.target.value);
 };
  // input의 값이 바뀔 때 위에서 만들어둔 getDebounce함수가 실행된다
  
  return (
    <>
      <input type="text" onChange={onChangeSearch} />
    </>
   )
}