개발하는데 다 이유가 있겠지

`디바운스(Debounce)`와 `쓰로틀(Throttle)`은 연속되는 이벤트나 함수의 호출을 제어하여 최적화하는 기법입니다.

`디바운스(Debounce)`는 연속적으로 이벤트가 발생했을 때, 마지막 이벤트가 발생한 후 일정 시간이 지난 후에 이벤트 핸들러가 실행되는 방식입니다. 이를 통해 불필요하게 많은 이벤트 호출을 방지할 수 있습니다. 예를 들어, 검색창에 사용자가 키를 입력할 때마다 검색 요청을 보내면 부하가 지나치게 커지기 때문에, 사용자가 입력을 멈춘 후 일정 시간이 지나면 요청을 보내는 방식으로 디바운스를 적용할 수 있습니다.

 

`쓰로틀(Throttle)`은 일정 시간 간격동안 발생한 이벤트 중 첫 번째 또는 마지막 이벤트만 처리하는 방식입니다. 즉, 이벤트가 계속해서 발생하더라도 설정된 시간 동안에는 한 번만 이벤트 핸들러가 실행됩니다. 예를 들어, 사용자가 연속 클릭을 한다면 클릭할 때마다 이벤트가 발생하는데, 이를 매번 처리하면 부하가 불필요하게 커지니 쓰로틀을 적용해 일정 간격 내 한 번만 처리하게 할 수 있습니다.

 

• `디바운스` : 마지막 이벤트 이후에 딜레이를 두고 처리하는 방식
• `쓰로틀` : 일정 시간 간격을 두고 이벤트를 처리하는 방식

---

무한 스크롤 구현 시 어떤 방식을 선택하시겠습니까?

스크롤은 연속적인 동작이며 사용자가 페이지 하단에 도달했을 때 즉각적인 반응을 기대합니다. `쓰로틀`은 스크롤이 하단에 위치하게 된 순간 즉시 추가 데이터 요청을 수행하므로, 사용자에게 더 자연스러운 스크롤 경험을 제공할 수 있습니다.

`디바운스`를 사용할 경우, 사용자가 반복적으로 스크롤한다면 스크롤이 멈춘 후에야 데이터를 불러오기 시작하므로 지연이 발생할 수 있습니다.

`쓰로틀`은 스크롤 중에도 주기적으로 체크하므로 무한 스크롤을 구현할 때에는 쓰로틀로 구현하는 것이 좋습니다.

---

💡 실제 적용 사례

▶ 문제1 : `macbook`을 입력하는 과정에서 모든 입력마다 불필요한 API 요청을 발생시킴

▶ 해결책1 : `디바운싱`을 사용해 함수가 일정 시간뒤에 호출

불필요한 API 요청 발생

▶ 문제2 : 디바운싱을 적용하고 `macbook`을 빠르게 입력하면 `k`만 입력되는 상황 / 천천히 입력해야 제대로 인식

▶ 해결책2 : 검색어 상태 관리 변수 추가(inputValue 추가)

빠르게 입력 불가

const debouncedHandleTermChange = useCallback(
  debounce((value: string) => {
    handleTermChange(value)
  }, 300),
  []
)

  return (
    <main className={cn('relative', className)} {...props}>
      <Input
        value={term}
        onChange={(e) => debouncedHandleTermChange(e.target.value)}
        className={'h-12 pl-12 text-base'}
        placeholder={'Search product'}
      />
      <SearchIcon className={'absolute left-3 top-1/2 -translate-y-1/2'} />
    </main>
  )

검색어 입력창에서는 현재 검색어인 `{term}`을 value로 사용하는데, term은 디바운싱된 최종 검색어(URL 검색어)를 저장하고 있다.

그렇기 때문에 검색어 상태를 업데이트 할 수 있는 변수를 따로 만들어 관리해줘야 한다.(term → inputValue)

const [inputValue, setInputValue] = useState('')

 

최종 완성본

디바운싱 적용 최적화 완료

마지막 이벤트가 발생하고 일정 시간뒤에 API 요청이 되도록 수정하여 문제를 해결했다.

 

회고

• 디바운싱을 적용하며 사용자 경험이 떨어지는 것을 체험해보면서 사용자 경험과 성능 사이의 균형을 맞추는 것이 중요하다고 느꼈다.
• 초기 문제파악 단계에서 성능 최적화에서 고려해야 할 사항들을 파악한 것이 도움이 많이 됐다.