[Next.js] Throttling and Debouncing

 

짧은 시간 여러번 이벤트가 발생했을 때 서버의 요청을 제한해서 서버의 부담을 줄이는 방법이다.

 

Throttling

이벤트를 단위로 그룹화하여 호출하는 것

 

 

코드 실행 순서

1. onClick으로 throttle 함수가 실행된다.

2. timerId가 null이므로 if는 통과한다.

3. setTimeout이 실행되면서 timerId가 생성된다.

4. 다시 한번 클릭하면 timerId가 이미 있으므로 return되어 빠져나간다.

5. setTimeout의 만료후 timerId = null이 실행된다.

6. 다시 요청이 들어오면 1번부터 반복하여 실행된다.

 

 

 

코드 실행 순서

1. onClick으로 throttle 함수가 실행된다.

2. 함수가 클로저 함수이므로 외부의 timerId의 null값을 받아오면서 if는 통과한다.

3. setTimeout이 실행되면서 timerId가 생성된다.

4. 다시 한번 클릭하면 timerId가 이미 있으므로 return되어 빠져나간다.

5. setTimeout의 만료후 useState 함수가 실행되며 리랜더링이 발생한다.

6. 다시 요청이 들어오면 useCallback이 포함되어 있으므로 메모이제이션이 발생하여 return 부분만 반복하여 실행된다.

- 이것은 이전에 호출했던 함수를 반복적으로 호출한다고 표현한다.

 

Debouncing

마지막 이벤트로부터 일정 시간이 경과한 후에 한번만 호출하도록 하는 것

 

 

코드 실행 순서

1. onClick으로 debounce 함수가 실행된다.

2. timerId가 null이므로 if는 통과한다.

3. setTimeout이 실행되면서 timerId가 생성된다.

4. 다시 한번 클릭하면 timerId가 이미 있으므로 timerId를 초기화시키며 다음 함수를 실행시킨다.

5. setTimeout의 만료후 timerId = null이 실행된다.

6. 다시 요청이 들어오면 1번부터 반복하여 실행된다.

 

 

 

코드 실행 순서

1. onClick으로 debounce 함수가 실행된다.

2. 함수가 클로저 함수이므로 외부의 timerId의 null값을 받아오면서 if는 통과한다.

3. setTimeout이 실행되면서 timerId가 생성된다.

4. 다시 한번 클릭하면 timerId가 이미 있으므로 timerId를 초기화시키며 다음 함수를 실행시킨다.

5. setTimeout의 만료후 useState 함수가 실행되며 리랜더링이 발생한다.

6. 다시 요청이 들어오면 useCallback이 포함되어 있으므로 메모이제이션이 발생하여 return 부분만 반복하여 실행된다.

 

요청을 처리하는 중에 페이지 이동 등이 발생했을 때

필요하지 않은 메모리를 계속 점유하고 있는 경우인 메모리 누수가 발생할 수 있다.

timerId는 같은 페이지에서 도는 경우에는 메모리 누수가 없다.

페이지 등의 이동이 발생한 경우에는 메모리 누수가 있다.

 

return에서 timer를 취소시키면 debounce나 throttle이 실행되는 중간에 페이지를 이동하였을 때 함수의 작동을 취소할 수 있다.

 

그러나 setState 함수가 실행되는 두번째 예시에서는 timerId에 접근할 수 없어 이 방법은 사용할 수 없다.

 

Lodash

자바스크립트 유틸리티 함수를 모아놓은 라이브러리

같은 throttle, debounce 함수여도 더 적은 코드로 적용할 수 있다.

 

lodash에서는 메모리 누수를 막기 위해 cancel 기능을 지원하고 있다.

 

 

Next.js에서 lodash import 오류

 

lodash 패키지가 ES6 모듈 스타일의 export가 아닌, CommonJS 스타일의 모듈 export를 하고 있어서 발생하는 문제다. 

ES6 모듈이 아닌 것을 ES6 스타일로 import 해오려면, 타입스크립트의 컴파일러 옵션으로 esModuleInterop 플래그를 세워줘야한다.