[React] cleanUp Function 을 이용한 디바운싱 기능

만약 ip 또는 pw 의 input 에 타이핑을할때마다 api 호출을 해야되는 상황이라면

input 에 onChange 될때마다 api 호출하는것이 아닌

어느정도 타이핑을 기다린후 사용자가 타이핑을 멈췄을때 api 를 호출하는것이 디바운싱 기능이다.

 

디바운싱의 의미는 

• 디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용되곤 한다.

 

 

아래는 로그인을 할때 디바운싱을 통한 간단한 id,pw 의 검증 예제이다.

email 과 password 가 바뀔때마다 useEffect가 실행되는데

setTimeout 을 주어서 0.5초 안에 useEffect가 실행되면 cleanUp 시켜버린다.

 

 

디바운싱과 비슷한 맥락으로 쓰로틀링 이라는 방법도 있다.

• 쓰로틀링(Throttling) : 연이어 발생한 이벤트에 대해, 일정한 delay를 포함시켜 연속적으로 발생한 이벤트는 무시하는 방식을 뜻한다. 즉, delay 시간동안 호출된 함수는 무시하는 케이스 이다

쓰로틀링은 보통 성능 문제 때문에 많이 사용한다. 특성 자체가 실행 횟수에 제한을 거는 것이기도 하다.

스크롤을 올리거나 내릴 때 scroll 이벤트가 매우 많이 발생한다.

scroll 이벤트가 발생할 때 뭔가 복잡한 작업을 하도록 설정했다면 매우 빈번하게 실행되기 때문에

엄청 렉이 걸릴 것입니다. 그럴 때 쓰로틀링을 사용한다 

 

자주사용하는 js 라이브러리 lodash 에 두 기능이 내장되어있다