개요

서비스를 위해 개발하고 있던 기자재 대여 서비스를 리팩토링을 위해 살펴보고 있던 중 한가지 문제를 발견했다.

보이는대로 사용자가 철자를 입력할 때마다 refetch가 발생하고 있었다.

input의 value가 onChange가 될 때 마다 재요청을 보내고있었다.

문제 해결

중복 함수 호출에 대해 찾아보니 debouncing이라는 개념에 대해 알게 되었다.

debouncing 이란?

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

말 그대로 연속으로 호출되는 함수의 맨 처음과 마지막만 호출되게 하는 기술이다.

위 처럼 버튼을 연속으로 눌러 요청을 보냈을 때, 이 클릭 이벤트를 마지막 한번만 실행함으로서 불필요한 요청을 없앨 수 있다.

한번 코드에 적용해보자

useEffect(() => {
    let delayTimer: NodeJS.Timeout

    const delayedFetch = (): void => {
      clearTimeout(delayTimer)
      delayTimer = setTimeout(() => {
        refetch()
        if (data) setList(data?.data?.equipmentList)
      }, 200)
    }
    delayedFetch()

    return () => clearTimeout(delayTimer)
  }, [inputValue,refetch])

1. inputValue와 refetch가 변경될 때 마다 delayedFetch 함수를 호출한다.
2. debounce 함수가 실행되며 clearTimeout을 통해 이전에 실행 대기중이였던 요청을 취소한다.
3. setTimeout 함수를 사용하여 200밀리초(0.2초) 후에 새로운 데이터 요청한다. 그 후에는 요청이 성공했을 때 받은 데이터를 처리한다.

이렇게 디바운싱을 통해 불필요한 중복 요청을 없앨 수 있다!