검색 기능 구현

디바운싱 vs 쓰로틀링

디바운싱
특정 시간 이내, 추가 입력 없을시, 마지막 1회만 실행
ex) onChange 함수에서 '안녕하세요' 입력 후 1초 동안 추가 입력 없을시 마지막1회 쿼리 실행

 

쓰로틀링
특정 시간 이내, 추가 입력 있어도, 처음 1회만 실행
ex) 무한스크롤을 직접 구현 시 스크롤 내리면 api 요청됨
스크롤을 무수히 많이 내려도 1번만 내린 것으로 처리해야함

---

검색결과 페이지네이션

검색결과에서 페이지네이션을 하려면
onClickPage에서 refetch를 실행할때 search를 인자로 넣어줘야할 것 같지만
onClickSearch의 refetch를 실행할때 search와 page 값이 저장돼서
굳이 입력안해도 해당 search에서 onClickPage로 refetch가 넘어간다

const getDebounce = _.debounce((value) => {
    void refetch({ search: value, page: 1 })
  }, 500)

  const onChangeSearch = (event: ChangeEvent<HTMLInputElement>): void => {
    // setSearch(event.currentTarget.value)
    getDebounce(event.currentTarget.value)
  }