JavaScript Debounce와 Throttle: 성능 최적화 방법

작성일 : 2024-07-20

JavaScript Debounce와 Throttle: 성능 최적화 방법

JavaScript는 웹 개발자들에게 필수적인 언어로, 다양한 기능을 제공합니다. 그 중에서도 성능 최적화 기법인 Debounce와 Throttle를 이해하는 것은 효율적인 코드 작성을 위한 중요한 요소입니다. 이 글에서는 Debounce와 Throttle의 개념, 차이점, 사용 예제, 그리고 실무에서 이들을 어떻게 활용할 수 있는지에 대해 다룹니다.

Debounce란 무엇인가?

Debounce는 짧은 시간 간격으로 발생하는 여러 이벤트를 하나의 이벤트로 만들어주는 기술입니다. 주로 연속된 이벤트가 발생할 때 마지막 이벤트만 처리하도록 만들어 불필요한 처리를 줄입니다. 이 기술은 입력 필드 자동완성 기능이나 창 크기 조정과 같은 경우에 유용하게 사용됩니다.

Debounce를 사용하면 특정 시간 간격 내에 반복적으로 호출되는 함수의 호출 횟수를 줄일 수 있습니다. 예를 들어, 사용자가 검색창에 문자를 입력할 때마다 검색 요청을 보내는 대신 마지막 입력 후 일정 시간동안 추가 입력이 없을 때만 검색 요청을 보내도록 할 수 있습니다.

Debounce 예제


javascript
function debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

const searchInput = document.querySelector('#searchInput');
searchInput.addEventListener('input', debounce(function(event) {
    console.log('Search query:', event.target.value);
}, 300));

위 예제에서, 사용자가 문자를 입력할 때마다 debounce 함수가 호출됩니다. debounce는 마지막 입력 이후 300ms 동안 추가 입력이 없을 때만 함수를 실행합니다.

Throttle이란 무엇인가?

Throttle은 지정된 시간 간격 동안 함수가 한 번만 실행되도록 제한하는 기술입니다. 이는 스크롤 이벤트, 윈도우 리사이즈 이벤트 등 짧은 시간에 다수 발생할 수 있는 이벤트를 처리할 때 유용합니다. Throttle는 이벤트가 얼마나 자주 발생하든 상관없이 일정 간격으로 함수를 실행하게 만듭니다.

Throttle 예제


javascript
function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

const scrollHandler = () => {
    console.log('Scroll event triggered');
};

window.addEventListener('scroll', throttle(scrollHandler, 1000));

위 예제에서 throttle 함수는 스크롤 이벤트가 발생할 때마다 1초에 한 번씩만 scrollHandler 함수를 실행하도록 제한합니다.

Debounce와 Throttle의 차이점

Debounce와 Throttle는 이벤트 처리를 최적화하는 데 사용되지만, 그 작동 방식에는 중요한 차이점이 있습니다.

Debounce는 연속된 이벤트에서 마지막 이벤트만 처리하며, 주로 입력 필드 자동완성과 같은 시나리오에 사용됩니다.
Throttle는 연속된 이벤트에 대해 일정 시간마다 한 번씩만 처리하며, 주로 스크롤 이벤트나 윈도우 리사이즈와 같은 시나리오에 적합합니다.

실무에서의 활용

실무 프로젝트에서 Debounce와 Throttle를 올바르게 사용하는 것은 애플리케이션의 성능을 크게 개선할 수 있습니다. 다음은 두 기법을 실제 코드베이스에서 어떻게 활용할 수 있는지 몇 가지 예제입니다.

AJAX 자동완성


javascript
const searchInput = document.querySelector('#searchInput');

searchInput.addEventListener('input', debounce(async function(event) {
    const query = event.target.value;
    if (query) {
        const response = await fetch(`/search?q=${query}`);
        const results = await response.json();
        console.log(results);
    }
}, 300));

위 예제에서는 입력 필드에서 사용자가 입력할 때 자동으로 검색 결과를 가져오는 기능을 구현합니다. debounce를 사용하여 마지막 입력 후 300ms 동안 추가 입력이 없을 때만 AJAX 요청을 보냅니다.

무한 스크롤


javascript
const loadMoreContent = async () => {
    const response = await fetch('/load-more');
    const newContent = await response.json();
    document.querySelector('#content').append(newContent);
};

window.addEventListener('scroll', throttle(function() {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
        loadMoreContent();
    }
}, 1000));

위 예제에서는 무한 스크롤 기능을 구현했습니다. throttle를 사용하여 스크롤 이벤트의 속도가 빠르더라도 1초에 한 번씩만 콘텐츠를 불러옵니다.

결론

Debounce와 Throttle는 JavaScript에서 성능을 최적화하는 중요한 기법입니다. 두 기법 모두 불필요한 함수 호출을 줄여주며, 웹 애플리케이션의 성능과 사용자 경험을 개선할 수 있습니다. 이 글에서 소개한 예제와 개념을 참고하여, 여러분의 프로젝트에서도 효율적인 코드를 작성해 보시기 바랍니다.