#11.TIL | Debouncing

이번 프로젝트에서 검색창을 통한 filtering을 구현하였다. onChange가 일어날때마다 이벤트가 일어나는 target의 값을 recoilState에 업데이트 시켜줬다. 물론, 값이 입력될때마다 api와 통신은 하지 않았지만, 만약 데이터양이 방대해져 입력값을 통신해야된다는 상황이라면 필요이상으로 이벤트들이 반복될것이다. 이러한 과부하를 줄이는 방법중 하나인 Debouncing을 알게 되어 적용해보았다.

기존코드

 const handleInputChange = e => {  
      setSearchWord(e.target.value);
  };

onChange이벤트가 일어나면 입력값이 바뀔때마다 Atom의 값을 업데이트해주고, selector에서 filtering을 해주었다.
따라서, "데이비드"라는 단어를 검색하면 총 11번의 렌더링이 일어난것이다. 문제점으로는 "ㄷ", "뎅"과 같은 글자에서는 filtering이 적용되지 않아 제대로된 검색결과 리스트가 렌더되지 않는다. 또한, api요청이라고 가정했을때는 불필요한 요청을 총 11번이나 하게 된다.

바뀐코드

  const [timer, setTimer] = useState(0); 

  const handleInputChange = e => {
    if (timer) {  //0.5초 미만으로 입력이 주어질 경우 해당 timer를 clear
      clearTimeout(timer);
    }
    const newTimer = setTimeout(() => {
      setSearchWord(e.target.value);
    }, 500); //입력 후 0.5초 이상 지나면 e.target.value를 담는 함수 실행
    setTimer(newTimer);
  };

onChange이벤트가 일어나면 0.5초 안에 연속으로 들어온 이전 요청들은 clear되고 마지막 요청만 실행하게 된다. 따라서, 똑같이 "데이비드"를 검색해본다면 전혀 이질감없이 특별히 빠르게 타이핑하지 않아도 마지막 단어만 이벤트가 일어나게 된다.