웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
JavaScript를 다루다 보면 여러 이벤트를 효율적으로 관리하고 싶을 때가 많습니다. 특히 자주 발생하는 이벤트, 예를 들면 스크롤 이벤트나 리사이징 이벤트는 성능에 큰 영향을 줄 수 있죠. 이럴 때 lodash의 throttle 함수를 활용하면 아주 편리하며 동시에 성능에도 이점이 많습니다. 그럼 아래에서 throttle에 대하여 자세히 알아봅니다.
최근 한 화면 단위로 모든 콘텐츠를 보여주는 풀페이지 레이아웃을 구현하면서 반복되는 스크롤 이벤트에 대하여 제한이 필요했습니다. 이런 경우 lodash의 throttle()을 사용하면 보다 쉽게 원하는 기능을 구현할 수 있습니다.
throttle()은 이처럼 반복되는 이벤트 등에 사용되는 함수입니다. 만약 이벤트가 계속해서 함수를 호출되는 경우 throttle()을 사용하면 정해진 시간 동안 한 번만 호출되게 하는 기능입니다. 예를 들어, 사용자가 스크롤하는 동안에는 해당 이벤트 핸들러가 너무 자주 호출되면 너무 자주 함수 내부의 기능을 동작시키기 때문에 성능에 매우 큰 영향을 주게 됩니다. 이럴 때 throttle()을 사용하면 정해진 시간 간격으로만 함수가 실행됩니다.
다음으로 throttle 메소드의 기본 사용방법은 아래와 같습니다.
lodash.throttle(fn, interval, [options]);
여기서 각각 아래와 같이 쓰입니다.
fn : 이벤트가 발생할 때마다 호출될 함수
interval : 함수가 호출될 최소 시간 간격
options : <Optional> throttle() 메소드의 옵션
여기서 options는 선택 가능한 값으로 다음과 같이 사용됩니다.
여기서~ options에서 trailing을 사용하여 false 값을 줄 경우 처음 한 번만 이벤트가 사용되도록 제어가 가능합니다.
잠깐! throttle와 debounce의 차이점은?
보통 throttle과 debounce를 함께 알아두면 편리한데요 ~ 많은 분들이 throttle과 debounce를 혼동하곤 합니다. 둘 다 함수의 실행 빈도를 조절하는 기술이지만, 둘 사이에는 차이점이 있습니다.
throttle // 일정 시간 간격으로 함수를 실행합니다. 예를 들면, 100ms마다 한 번씩 실행됩니다.
debounce // 연속된 이벤트 발생 후 일정 시간이 지나면 함수를 실행합니다. 예를 들면, 사용자가 텍스트를 입력하다가 300ms 동안 멈추면 그때 함수를 실행합니다.
개인적으로는 사용 상황에 따라 적합한 기술을 선택하는 것이 좋다고 생각합니다. 스크롤 같은 연속적인 이벤트에는 throttle이, 검색어 입력 같은 비연속적인 이벤트에는 debounce가 일반적으로 사용하게 됩니다. 이는 대부분의 사람들의 경험에 따르는 동작으로 구현하는 것이 가장 적합하다 하겠습니다.
아래 예제는 throttle을 사용하여 스크롤 이벤트를 제어하는 예제를 간략하게 만들어봅니다.
일반적으로 가장 많이 쓰이는
위 예시는 사용자가 스크롤할 때 100ms마다 한 번씩만 '스크롤 이벤트 발생!'이라는 메시지가 출력됩니다. 만약 throttle()이 없다면 계속해서 console() 메시지를 매우 많이 출력하게 될 것입니다.
아래는 위와 비슷하지만 마우스를 사용하는 경우의 예제입니다. 마우스 이동 이벤트 역시 반복해서 발생하므로 throttle을 사용하여 제어하는 것이 필요할 수 있죠.
여기까지 throttle() lodash 메서드에 대하여 간략하게 알아보았습니다. 참고로 throttle()은 자바스크립트를 사용하여 구현할 수도 있지만 라이브러리를 사용하는 것이 간편합니다. 아래의 라이브러리 역시 비슷한 기능을 제공합니다.
RxJS, RamJS, Immutable.js 등등
1. `throttle`은 함수의 실행 빈도를 일정 시간 간격으로 제한합니다.
2. 스크롤, 리사이징 같은 연속적인 이벤트 처리에 효과적입니다.
3. `throttle`과 `debounce`는 비슷하지만 사용 용도에 따라 적절하게 활용해야 합니다.
4. lodash의 `throttle` 메서드를 사용하면 쉽게 이 기술을 구현할 수 있습니다.
5. 성능 최적화를 위해 이벤트 핸들러의 호출 빈도를 조절하고 싶을 때 유용합니다.
Lodash의 throttle 메서드 알아보기
최근 한 화면 단위로 모든 콘텐츠를 보여주는 풀페이지 레이아웃을 구현하면서 반복되는 스크롤 이벤트에 대하여 제한이 필요했습니다. 이런 경우 lodash의 throttle()을 사용하면 보다 쉽게 원하는 기능을 구현할 수 있습니다.
throttle 메서드의 기능은?
throttle()은 이처럼 반복되는 이벤트 등에 사용되는 함수입니다. 만약 이벤트가 계속해서 함수를 호출되는 경우 throttle()을 사용하면 정해진 시간 동안 한 번만 호출되게 하는 기능입니다. 예를 들어, 사용자가 스크롤하는 동안에는 해당 이벤트 핸들러가 너무 자주 호출되면 너무 자주 함수 내부의 기능을 동작시키기 때문에 성능에 매우 큰 영향을 주게 됩니다. 이럴 때 throttle()을 사용하면 정해진 시간 간격으로만 함수가 실행됩니다.
다음으로 throttle 메소드의 기본 사용방법은 아래와 같습니다.
lodash.throttle(fn, interval, [options]);
여기서 각각 아래와 같이 쓰입니다.
fn : 이벤트가 발생할 때마다 호출될 함수
interval : 함수가 호출될 최소 시간 간격
options : <Optional> throttle() 메소드의 옵션
여기서 options는 선택 가능한 값으로 다음과 같이 사용됩니다.
- leading : (default. false) 함수가 처음 호출될 때 이전 이벤트가 발생한 후부터 interval 시간 간격이 지난 후에 호출할지 여부
- trailing : (default. true) 함수가 마지막 이벤트가 발생한 후 interval 시간 간격이 지난 후에 호출할지 여부
- trailingCallback : 함수가 마지막 이벤트가 발생한 후 interval 시간 간격이 지난 후에 호출될 함수
여기서~ options에서 trailing을 사용하여 false 값을 줄 경우 처음 한 번만 이벤트가 사용되도록 제어가 가능합니다.
잠깐! throttle와 debounce의 차이점은?
보통 throttle과 debounce를 함께 알아두면 편리한데요 ~ 많은 분들이 throttle과 debounce를 혼동하곤 합니다. 둘 다 함수의 실행 빈도를 조절하는 기술이지만, 둘 사이에는 차이점이 있습니다.
throttle // 일정 시간 간격으로 함수를 실행합니다. 예를 들면, 100ms마다 한 번씩 실행됩니다.
debounce // 연속된 이벤트 발생 후 일정 시간이 지나면 함수를 실행합니다. 예를 들면, 사용자가 텍스트를 입력하다가 300ms 동안 멈추면 그때 함수를 실행합니다.
개인적으로는 사용 상황에 따라 적합한 기술을 선택하는 것이 좋다고 생각합니다. 스크롤 같은 연속적인 이벤트에는 throttle이, 검색어 입력 같은 비연속적인 이벤트에는 debounce가 일반적으로 사용하게 됩니다. 이는 대부분의 사람들의 경험에 따르는 동작으로 구현하는 것이 가장 적합하다 하겠습니다.
throttle 활용 예제 보기
아래 예제는 throttle을 사용하여 스크롤 이벤트를 제어하는 예제를 간략하게 만들어봅니다.
1. 스크롤 throttle 예제
일반적으로 가장 많이 쓰이는
import _ from 'lodash';
window.addEventListener('scroll', _.throttle(function() {
console.log('스크롤 이벤트 발생!');
}, 100));
window.addEventListener('scroll', _.throttle(function() {
console.log('스크롤 이벤트 발생!');
}, 100));
위 예시는 사용자가 스크롤할 때 100ms마다 한 번씩만 '스크롤 이벤트 발생!'이라는 메시지가 출력됩니다. 만약 throttle()이 없다면 계속해서 console() 메시지를 매우 많이 출력하게 될 것입니다.
2. 마우스 이동 throttle 예제
아래는 위와 비슷하지만 마우스를 사용하는 경우의 예제입니다. 마우스 이동 이벤트 역시 반복해서 발생하므로 throttle을 사용하여 제어하는 것이 필요할 수 있죠.
const mousemove = (event) => {
console.log(event.pageX, event.pageY);
};
const throttledMouseMove = lodash.throttle(mousemove, 100);
window.addEventListener("mousemove", throttledMouseMove);
console.log(event.pageX, event.pageY);
};
const throttledMouseMove = lodash.throttle(mousemove, 100);
window.addEventListener("mousemove", throttledMouseMove);
여기까지 throttle() lodash 메서드에 대하여 간략하게 알아보았습니다. 참고로 throttle()은 자바스크립트를 사용하여 구현할 수도 있지만 라이브러리를 사용하는 것이 간편합니다. 아래의 라이브러리 역시 비슷한 기능을 제공합니다.
RxJS, RamJS, Immutable.js 등등
짧게 요약 내용 보기
1. `throttle`은 함수의 실행 빈도를 일정 시간 간격으로 제한합니다.
2. 스크롤, 리사이징 같은 연속적인 이벤트 처리에 효과적입니다.
3. `throttle`과 `debounce`는 비슷하지만 사용 용도에 따라 적절하게 활용해야 합니다.
4. lodash의 `throttle` 메서드를 사용하면 쉽게 이 기술을 구현할 수 있습니다.
5. 성능 최적화를 위해 이벤트 핸들러의 호출 빈도를 조절하고 싶을 때 유용합니다.
아래의 글도 찾고 계시지 않나요?
