API 호출 최적화를 위한 디바운스(Debounce) 함수 활용법

API 호출 최적화를 위한 디바운스(Debounce) 함수 활용법

웹 개발을 하다 보면 API 호출을 최적화하는 것이 굉장히 중요합니다. 특히 검색 입력창 같은 곳에서 사용자가 타이핑할 때마다 API 요청이 발생하면, 불필요한 네트워크 요청이 많아져 성능이 저하될 수 있습니다. 이런 문제를 해결하기 위해 디바운스(Debounce) 함수를 사용하면 훨씬 효율적으로 API를 호출할 수 있습니다.

이번 글에서는 디바운스가 무엇인지, 왜 필요한지, 그리고 어떻게 구현하는지를 쉽게 설명해보려고 합니다.

---

1. 디바운스(Debounce) 함수란?

디바운스 함수는 일정 시간 동안 이벤트가 반복해서 발생해도 마지막 이벤트 이후 일정 시간이 지나야 실행되도록 제한하는 함수입니다.

쉽게 말해, 사용자가 검색창에 입력할 때마다 API 요청이 바로 실행되지 않고, 일정 시간이 지나면 한 번만 실행되도록 조절하는 방식입니다.

예를 들어, 검색창에서 “API 호출 최적화”라고 입력한다고 가정해보겠습니다.

• 디바운스 적용 전: 사용자가 키보드를 칠 때마다 API 요청이 발생 → 불필요한 요청 증가
• 디바운스 적용 후: 사용자가 입력을 멈추고 일정 시간이 지난 후 한 번만 API 요청 → 최적화된 호출

이처럼 디바운스를 사용하면 불필요한 API 호출을 줄이고, 서버 부하를 줄일 수 있습니다.

---

2. API 호출 최적화가 왜 필요할까요?

실제 서비스에서는 사용자 경험(UX)과 성능을 고려해 API 호출을 최적화해야 합니다.

디바운스가 필요한 대표적인 상황

검색 입력창(API 요청 최소화)

• 사용자가 입력할 때마다 API를 호출하면 서버 부하 증가
• 디바운스를 사용하면 입력이 끝난 후 일정 시간 뒤 한 번만 요청

자동 저장 기능

• 사용자가 글을 입력할 때마다 저장 요청이 발생하면 비효율적
• 일정 시간 동안 입력이 없을 때만 API 호출

스크롤 이벤트(리스트 페이징 처리)

• 사용자가 페이지를 스크롤할 때마다 데이터 요청 발생
• 디바운스로 불필요한 호출을 막고 성능 최적화

이처럼 디바운스는 불필요한 API 요청을 줄이고, 서버와 클라이언트의 성능을 향상시키는 데 큰 역할을 합니다.

---

3. 자바스크립트로 디바운스 함수 구현하기

디바운스는 setTimeout과 clearTimeout을 활용해 쉽게 구현할 수 있습니다.

기본적인 디바운스 함수

function debounce(callback, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      callback(...args);
    }, delay);
  };
}

이 함수는 이전 실행 요청을 취소하고, 새로운 요청이 들어오면 다시 일정 시간을 기다렸다가 실행하는 방식으로 동작합니다.

---

4. 디바운스를 활용한 API 호출 최적화 예제

이제 실제로 검색 입력창에 디바운스를 적용해서 API 호출을 최적화해보겠습니다.

디바운스를 적용한 검색 입력 이벤트

const searchInput = document.getElementById("search");

const fetchData = debounce((event) => {
  console.log("API 호출: ", event.target.value);
  // 여기서 API 호출 실행 (예: fetch 함수 사용)
}, 500);

searchInput.addEventListener("input", fetchData);

어떻게 동작할까요?

1. 사용자가 검색창에 입력할 때마다 fetchData 함수가 실행됩니다.
2. 하지만 연속 입력이 끝나고 500ms 동안 추가 입력이 없을 때만 API 호출이 실행됩니다.
3. 덕분에 불필요한 API 요청이 발생하지 않고, 서버 부하가 줄어듭니다.

---

5. Lodash 라이브러리를 활용한 디바운스

직접 구현하는 것도 좋지만, 더 안정적인 방법은 Lodash 라이브러리의 _.debounce 함수를 사용하는 것입니다.

Lodash 디바운스 적용 예제

// Lodash 라이브러리를 사용한 디바운스
const fetchData = _.debounce((event) => {
  console.log("API 호출: ", event.target.value);
  // 실제 API 요청 로직 추가
}, 500);

document.getElementById("search").addEventListener("input", fetchData);

Lodash의 _.debounce 함수는 디바운스 로직을 내부적으로 최적화해줘서 직접 구현할 필요 없이 간편하게 사용할 수 있습니다.

---

6. 디바운스와 스로틀(Throttle)의 차이

디바운스와 함께 자주 언급되는 개념이 스로틀(Throttle)입니다.

디바운스는 이벤트가 연속적으로 발생할 때 마지막 이벤트 이후 일정 시간이 지나야 실행됩니다. 대표적인 예로 검색 입력창, 자동 저장 기능과 같은 기능에 적합합니다.

반면 스로틀은 이벤트가 연속적으로 발생해도 일정 시간 간격마다 한 번씩 실행됩니다. 스크롤 이벤트나 리사이즈 이벤트처럼 너무 자주 실행되면 성능이 저하되는 경우에 주로 사용됩니다.

스로틀 예제 (스크롤 이벤트 최적화)

function throttle(callback, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastTime >= delay) {
      callback(...args);
      lastTime = now;
    }
  };
}

const handleScroll = throttle(() => {
  console.log("스크롤 이벤트 실행");
}, 500);

window.addEventListener("scroll", handleScroll);

스로틀은 일정 시간 간격마다 실행되므로 스크롤 이벤트 같은 곳에 적합하고,
디바운스는 마지막 이벤트가 끝난 후 실행되므로 검색 입력 같은 곳에 적합합니다.

---

API 호출을 최적화하는 것은 성능과 사용자 경험을 개선하는 중요한 요소입니다.

정리하자면…

✅ 디바운스는 일정 시간 동안 입력이 없을 때 한 번만 실행되도록 제한하는 함수입니다.
✅ 검색 입력, 자동 저장, API 요청 최적화에 적합합니다.
✅ Lodash의 _.debounce 함수를 활용하면 더욱 간편하게 적용 가능합니다.
✅ 디바운스는 스로틀과 다르게 마지막 이벤트 이후 실행되므로 용도에 따라 선택해야 합니다.

디바운스를 활용하면 불필요한 API 요청을 줄이고, 보다 효율적인 서비스를 만들 수 있습니다.
실제 프로젝트에서도 적극 활용해보면 성능 개선 효과를 확실히 체감할 수 있을 것입니다.