[javascript] Lodash의 프로세스 관리 함수들과 사용 예제
Lodash는 JavaScript 유틸리티 라이브러리로, 다양한 기능을 제공합니다. 이 중에서도 프로세스 관리에 유용한 함수들이 있습니다. 이번 블로그 포스트에서는 Lodash의 프로세스 관리 함수들과 사용 예제를 알아보겠습니다.
1. debounce 함수
debounce는 일정 시간 동안 같은 이벤트가 여러 번 발생할 경우, 마지막 이벤트만 처리하도록 지연시키는 함수입니다. 이를 통해 성능 개선이 가능합니다.
import { debounce } from 'lodash';
const searchInput = document.querySelector('#searchInput');
const handleSearch = debounce(() => {
// 검색 로직
}, 500);
searchInput.addEventListener('keyup', handleSearch);
위 예제에서는 keyup 이벤트가 발생할 때마다 handleSearch 함수가 호출되지만, 실제로 로직은 500ms의 딜레이 후에 한 번만 실행됩니다.
2. throttle 함수
throttle은 이벤트 처리가 반복적으로 발생할 때, 일정한 간격으로 이벤트를 제한적으로 처리하는 함수입니다. 이를 통해 너무 많은 이벤트 발생으로 인한 성능 저하를 방지할 수 있습니다.
import { throttle } from 'lodash';
const scrollHandler = throttle(() => {
// 스크롤 이벤트 처리
}, 100);
window.addEventListener('scroll', scrollHandler);
위 예제에서는 scroll 이벤트가 발생할 때 scrollHandler 함수가 호출되지만, 100ms의 간격으로 이벤트가 호출됩니다. 따라서 너무 빠르게 호출되는 경우에도 일정한 간격으로 처리가 이루어집니다.
3. delay 함수
delay 함수는 주어진 시간(ms)만큼 지연 후에 함수를 실행합니다.
import { delay } from 'lodash';
console.log('before');
delay(() => {
console.log('hello');
}, 2000);
console.log('after');
위 예제에서는 delay 함수를 사용하여 2000ms 후에 hello를 출력합니다. 실행 결과는 “before”, 2초 후 “hello”, “after” 순서로 출력될 것입니다.
이처럼 Lodash의 프로세스 관리 함수들을 사용하면 이벤트 처리를 효율적으로 관리할 수 있습니다.
참고 자료
- Lodash 공식 문서: https://lodash.com/docs/
- Lodash GitHub 저장소: https://github.com/lodash/lodash