debounce로 실시간 검색어 api 호출 줄이기

실시간 검색어 자동완성 컴포넌트를 구현했는데, 기존의 코드는 검색어 input 값이 바뀔때마다 서버에 api를 호출했다.

성능 개선을 위해 debounce라는 개념을 코드에 새로 적용해보았다. debounce가 어떤 개념이며 이걸 react 코드로 어떻게 적용할 수 있는지 알아본다.

 

 

 

기존 검색 컴포넌트

  useEffect(() => {
    getLazySearchList(); //api 호출
  }, [searchInputValue]);

 <TextField
            placeholder='그룹명을 검색하세요'
            value={searchInputValue}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
              setSearchInputValue(e.target.value)
            }
/>

 

위 코드에서는 useState hook으로 관리하고 있는 searchInputValue가 바뀔때마다 서버에 요청을 보낸다.

 

지금 예제 사진에서 보듯이 검색창에 유저가 아래 처럼 입력하면

ㄱ > 그 > 글 > 그루 > 그룹

유저의 onChange이벤트가 발생할때마다 api가 호출되는 것이므로 여기서 서버에 호출을 5번이나 하게 된다. 

 

사용자 경험측면에서는 유저가 입력한대로 바로바로 검색어에 해당하는 자동완성 목록 결과가 하단에 노출되니 좋다고 할 수 있다. 하지만, 만약 유저가 100만명이라면??? 실시간 검색만 하는데 `과도한 API 호출`로 인해 성능에 이상이 생길 수 도 있을 뿐더러 서버에 과부하가 갈 확률이 아주 높다.

 

이때 프런트단에서 이런 문제를 처리할 수 있는 방법 중 한 가지가 디바운스이다. 

 

Debounce란? 

 

처음에 debounce 라는 말이 와닿지 않았는데 

영어에서 de는 제거, 감소의 의미를 가지고 있는 prefix 이다.

decaffeine 디카페인하면 카페인을 제거한 것이고, defrost는 frost (서리)를 없애다, 얼린걸 녹이다, 해동하다라는 뜻을 가지고 있다.

그래서 debounce하면 bounce 신호를 제거한 것이다. 

 

 

Debouncing is removing unwanted input noise from buttons, switches or other user input. Debouncing prevents extra activations or slow functions from triggering too often. Debouncing is used in hardware switches, programs and websites.

 

 

 

디바운스는 하드웨어 용어로 시작되었다.

버튼, 스위치 등에서 원치않는 노이즈/바운스를 제거하는 것이라고 할 수 있다. 

그럼 바운스 신호가 무엇인가? 우리가 전기를 켰다 끌때 사용하는 실제 물리적인 전기 스위치를 예로 들면, 스위치를 누를때마다 신호가 파동처럼 발생한다.

 

 

 

 

 

처음 스위치를 누르면 신호는 일직선이 아닌 고점과 저점을 여러번 반복하는 파동같은 모양새를 가지다가 이후에 안정적인 일직선을 찾는다. 이런 신호로 스위치를 on/off 하는 것을 제어할 수 있는데, 신호가 고점에 도달해야지 스위치가 켜지는 그 지점이 이르기 전까지 초기에 발생하는 지지직거리는 파동같은 신호가 우리가 원치않는 노이즈이고, 디바운싱이라는 기술로 이 바운스 신호를 무시한다. 

 

정리하자면 debouncing은 하드웨어에서 신호가 너무 많이 활성화/실행되는 노이즈를 막는 기법인데, 웹 프로그램에서도 마찬가지로 유저의 인풋에 따른 과도한 이벤트 호출을 없애는 개념이다. 

 

웹 프런트에서의 디바운스 

 

짧은 시간 간격으로 발생하는 연속된 이벤트가 있을 때, 연속된 이벤트들(=노이즈)을 호출하지 않다가 일정 시간이 경과한 이후에 한 번만 호출하는 개념을 뜻한다. 

즉, 짧은 시간동안 연속해서 발생한 이벤트를 그룹으로 모았다가 `일정 시간 이후에 마지막 한 번만 이벤트를 호출`한다. 

 

사용 예시

• 브라우저 크기 resize 이벤트 
• 버튼 중복 클릭 방지 처리
• 실시간 검색어 자동완성 input 

 

그럼 디바운스의 개념을 리액트에서 어떻게 적용할 수 있을까? 

 

시간 타이머를 설정하는 것이 관건이 된다.

디바운스라는 테크닉은 위에서 정리했던 것처럼 일정 시간 이후에 한 번만 이벤트를 호출한다는 컨셉이다. 따라서 리액트에서 이 개념을 코드로 녹이려면? 유저가 input 을 입력하면 타이머를 설정해서 지정한 시간 간격 이내에 들어오는 input을 가지고 있다가, 설정한 시간이 끝나면 디바운싱된 밸류값을 상태값으로 관리해서 사용한다. 

 

이에 디바운스시킨 인풋 밸류를 리턴해주는 useDebounce라는 custom hook을 만들어 주었다. 

 

useDebounce hook

export const useDebounce = (value: string, delay: number) => {
  const [debounceValue, setDebounceValue] = useState(value);

  useEffect(() => {
    const debounceTimer = setTimeout(() => {
      setDebounceValue(value);
    }, delay);

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

  return debouncedValue;
};

 

 

useDebounce라는 함수다. 인자로 2가지를 받는데, 디바운싱 처리를 할 밸류값 `value` 과 설정하고 싶은 시간 간격 `delay` 을 정해줄 수 있다. 이 함수는 받아온 인자를 디바운싱 처리해서 설정한 시간이 끝나면 그 마지막 인풋 밸류값을 저장하고, 이를 `debouncedValue` 라는 값으로 리턴해준다.  

 

함수의 내부를 보자.

자바스크립트 내장함수 setTimeout 를 활용해서 `delay` 인자로 받은 시간 만큼을 재는 타이머를 설정한다.

이 타이머를 설정한 시간이 끝났을 때 setTimeout 안의 함수가 호출되는데, 타이머가 끝나야 `setDebounceValue`라는 디바운스 밸류를 상태로 저장하는 것이다. 

또한 이 타이머가 useEffect hook으로 관리되는 것을 보면 본래 value로 넘겨주는 input 값이 변경될때마다 새로 타이머가 시작되고 타이머가 클리어 되는 것을 확인할 수 있다. 결국 유저가 인풋을 칠 때마다 매번 타이머를 재설정한다는 것이다. value값이 바뀌면 이전 인풋 값에 설정한 타이머를 취소하고 다시 새로운 시간으로 타이머를 갱신한다.

이렇게 함으로써 본래 input값이 변경될 때마다 새로 타이머를 등록하고 타이머가 종료될 때 디바운스된 값을 가질 수 있다.

 

검색 컴포넌트에서 사용

export const SearchAutoComplete = () => {

  const debouncedSearchInputValue = useDebounce(searchInputValue, 1000);
  
  useEffect(() => {
    getLazySearchList(); //api 호출
  }, [debouncedSearchInputValue]);
  
  return 텍스트필드 컴포넌트
  }

 

 

컴포넌트에서 useEffect hook을 사용해서 디바운싱된 인풋밸류값이 변할 때마다 api 호출을 한다.

이제 그럼 input 값이 한 글자 한 글자 변할 때마다 api를 호출하는 것이 아닌, 설정한 시간이 끝나면 한 번만 호출되는 디바운싱된 밸류값이 변할 때마다 api를 호출하게 되어 성능을 개선할 수 있다. 

 

 

References
https://www.techtarget.com/whatis/definition/debouncing

What is debouncing? – TechTarget Definition

 

https://velog.io/@sunhwa508/%ED%98%BC%EB%9E%80%ED%95%9C-%EB%94%94%EB%B0%94%EC%9A%B4%EC%8A%A4debounce%EC%99%80-%EC%8A%A4%EB%A1%9C%ED%8B%80throttle-%EC%B0%A8%EC%9D%B4

velog

 

https://www.freecodecamp.org/korean/news/debounce-dibaunseu-javascripteseo-hamsureul-jiyeonsikineun-bangbeob-js-es6-yeje/

Debounce(디바운스) - JavaScript에서 함수를 지연시키는 방법 (JS ES6 예제)