[Next.js] 검색기능에 Debounce 적용해서 성능개선하기

 

Debounce

Debounce는 과도한 요청으로 발생할 수 있는 성능 저하 문제를 개선할 수 있는 방법 중 하나다.

input창에 연속적으로 값을 입력할때, 이벤트 변경이 발생하고 그때마다 네트워크 요청이 발생하게 되는데, 이런 경우에 지속적인 요청으로 인해 네트워크 용량과 백엔드 등 과부하가 발생할 수 있으므로 성능면에서 좋지 못하다.

(유료 API을 사용할경우엔 비용면으로도 문제가발생한다..🫠)

 

👉🏻 Debounce를 사용해, 연속적으로 발생하는 이벤트 중 마지막 이벤트(검색할 키워드) 만을 기점으로 네트워크 요청을 보내, 사용자 입력과 같은 빈번한 이벤트를 처리할때 사용한다.

 

 

useDebounce : 사용자 정의 Hook

import { useState, useEffect } from 'react'

export default function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => {
      clearTimeout(handler)
    }
  }, [value, delay])

  return debouncedValue
}

 

디바운싱할 값과 밀리초 단위의 지연이라는 두 가지 인수를 사용해, 디바운싱된 값을 반환한다.

후크는 useEffect지정된 지연 후에 디바운스된 값을 업데이트하는 시간 제한을 설정하는 데 사용된다. 또한 값이나 불확실성이 변경되면 시간 초과를 명확히 하는 정리 기능도 생성한다.

 

throttling

연이어 발생한 이벤트에 대해 일정한 delay를 포함시켜 연속적으로 발생한 이벤트는 무시하는 방식이다. 즉, delay시간동안 호출된 함수를 무시해서 일정간격으로 요청을 처리한다.

scroll 이벤트가 발생할때 복잡한 작업을 하도록 설정했다면 스크롤을 올리고 내릴때마다 굉장히 자주 실행되기 때문에, 렉이 발생할수 있다. 이럴때 쓰로틀링을 걸어준다! 

 

👉🏻 정해진 일정 간격으로 요청을 처리한다. 일정 간격마다 정기적으로 실행해야한다면 throttle로 처리하는 것이 적합하다.

 

 

 

 

 

 

 

 

 

 

 

https://hackernoon.com/how-to-use-debounce-in-nextjs

How To Use Debounce in Next.js | HackerNoon