디바운싱(debouncing)

연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

• 주로 ajax 검색에 자주 쓰임
• 예로 실시간 검색을 할때 사용자가 원하는 단어를 다 입력하기전에 입력할때 마다 ajax 요청을 보내게 되면 유료api였을때 큰 비용이 들게 된다.
• 비용뿐만 아니라 사용자의 경험과 서버에게도 부담이 되어 좋은 방향은 아니다.

  const [timer, setTimer] = useState(0)

  const changeValue = (e) => {
    if (timer) {
      clearTimeout(timer)
    }
    const delay = setTimeout(async () => {
      try {
        await axios.get(`api요청`)
      } catch (err) {
        console.log(err)
      }
    }, 300);
    setTimer(delay)
  }

쓰로틀링(throttling)

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

• 주로 스크롤을 내릴 때 사용 됨
• 스크롤을 올리거나 내릴 때 이벤트가 많이 발생하기때문에 복잡한 작업을 자주 실행하게 된다면 스크롤 할때마다 렉이 심해지기 때문에 쓰로틀링을 걸어 일정시간에 한번만 제한을 두는 역할을 한다.
• 디바운싱과 비슷하게 코드를 작성하면 된다.