Throttle & Debounce 란?

Input 태그에 onChange 함수를 적용해보며 Throttle 과 Debounce 함수에 대해 알아보는 시간이다~!!

 

먼저 Styled-components 를 활용하여 나만의 Input 태그를 꾸며준다. 

그 후 onChange 함수를 통해 input에 변화가 있을 때 마다 콘솔에 출력해보자.

 

function App() {
  const textInputted = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };
  return <Input onChange={textInputted} placeholder="입력하세요."></Input>;
}

const Input = styled.input`
  width: 300px;
  height: 50px;
  background-color: wheat;
  border-radius: 10px;
  font-size: 20px;
`;

 

 

위에서 볼 수 있듯이 매 변화마다 input의 내용이 콘솔에 출력되는 것을 확인할 수 있다.

 

그런데 만약 onChange시 수행되는 함수가 콘솔에 출력이 아니라 백 서버에 api 호출을 하고 있다면 어떨까? 상당한 성능 저하가 일어날 수도 있다. 이를 방지하기 위해 Throttle 과 Debounce 메소드를 사용할 수 있다.

 

lodash 라이브러리 설치 -> npm i --save-dev @types/lodash

 

Throttle 메소드는 개발자가 지정한 시간이 지난 후에만 이벤트를 발생하도록 해주는 기술이다.

 

function App() {
  const textInputted = throttle((e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  }, 500);
  return <Input onChange={textInputted} placeholder="입력하세요."></Input>;
}

 

위와 같이 throttle 메소드를 적용해준다. 

 

 

그러면 위와같이 0.5초마다 한번씩만 콘솔에 input 값이 출력되는 것을 확인할 수 있다.

 

Debounce 메소드도 마찬가지로 개발자가 지정한 시간이 지난 후에만 이벤트를 발생하도록 해주는 기술이다. 다만 Throttle 메소드와 다른점은 Debounce 메소드는 지정 시간이 지나기 전에 동일한 이벤트가 또 호출된다면 이전의 타이머를 없애주고 새 타이머로 업데이트 해준다. 

 

function App() {
  const textInputted = debounce((e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  }, 500);
  return <Input onChange={textInputted} placeholder="입력하세요."></Input>;
}

 

위와 같이 debounce 메소드를 적용해준다.

 

 

0.5초마다 이벤트를 호출해준 Throttle과 달리, 0.5초 이내에 같은 이벤트가 실행되지 않을 때 이벤트가 한번만 수행되는 것을 확인할 수 있다.

 

검색 기능을 구현할 때에 사용자가 입력할때마다 api를 호출하여 결과값을 가져오기 보다는 위의 기능을 활용하여 api 호출을 줄이면 더욱 성능이 좋은 사이트를 개발할 수 있을 것 같다!!