React | Debounce & Throttle

Debounce와 Throttle은 심화적인 개념이기도 하고 꼭 적용해야하는 개념은 아니어서 알아두면 좋고 사용할 수 있으면 좋은 정도다 라고 생각하고 내용을 보면 된다

연속적으로 발생하는 함수나 이벤트를 묶어서 처리하는 방식

-> 최적화를 통한 성능 향상 목적

 

 

자바스크립트에서 이벤트를 제어하여, 빈번하게 발생하는 이벤트를 효율적으로 처리하기 위한 두 가지 기법

스크롤, 리사이즈, 입력 등 사용자 상호작용이 잦은 이벤트에서 성능 최적화에 유용함

 

---

Debounce (디바운스)

특정 시간이 지난 후에 이벤트를 실행하도록 지연시키는 방식 (마지막에 한 번에 묶어서 처리해도 상관 없을 때)

이벤트가 연속해서 발생하면 마지막 이벤트만 실행

사용자가 멈춘 후 일정 시간이 지나야 작업을 수행하므로, 마지막 동작 이후 일정 시간 동안 추가 입력이 없을 때만 이벤트가 발생

 

• 사용 예 : 검색 입력창(자동 완성), 윈도우 리사이즈 이벤트 등
• 장점 : 불필요한 함수 호출을 줄여 성능을 최적화 함

 

예시

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

// 사용 예시
const onInputChange = debounce(() => console.log("Input event"), 300);

사용자가 입력을 멈추고 300ms가 지나면 onInputChange 함수가 실행 됨

 

---

Throttle (스로틀)

일정 시간 간격마다 한 번씩 이벤트를 실행하는 방식 (중간 중간 끊기지 않는 인터랙션이 필요할 때)

이벤트가 여러 번 발생해도 설정된 간격 내에는 한 번만 실행되므로, 고빈도 이벤트를 일정하게 제한할 수 있음

 

• 사용 예 : 스크롤 이벤트, 마우스 이동 이벤트 등
• 장점 : 이벤트가 너무 자주 호출되는 것을 막아, 부하를 줄임

 

예시

function throttle(func, interval) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}

// 사용 예시
const onScroll = throttle(() => console.log("Scroll event"), 1000);

사용자가 스크롤을 하는 동안 1초에 한 번만 onScroll 함수가 실행

 

---

차이점

• Debounce : 연속 이벤트가 끝난 후 특정 시간 후에 실행 -> 마지막 이벤트만 처리
• Throttle : 연속 이벤트 동안 일정 간격마다 실행 -> 주기적으로 이벤트 처리

 

두 기법은 이벤트 발생 빈도에 따라 불필요한 함수 호출을 줄이고, 성능을 최적화하는데 유용함

 

---

Lodash 라이브러리

React에서 Lodash는 자바스크립트 유틸리티 라이브러리로, 데이터를 다루거나 일반적으로 반복되는 작업을 간편하게 수행할 수 있도록 돕는 다양한 함수를 제공함

Lodash는 순수 자바스크립트로 만들어져 있으며 배열, 객체, 문자열 등의 데이터 조작을 위한 유틸리티 함수들을 제공함

React 프로젝트에서 Lodash를 사용하면 반복적인 코드 작성을 줄이고, 성능 최적화에 필요한 함수들도 쉽게 사용할 수 있다

 

주요 기능

배열 조작: 배열 내 요소들을 쉡게 필터링, 정렬, 중복 제거할 수 있음

• _.uniq : 중복 요소 제거
• _.difference : 두 배열 간의 차이 구하기

 

객체 조작 : 객체의 깊은 복사나 속성 병합을 지원함

• _.cloneDeep : 깊은 복사
• _.merge : 객체 병합

 

함수 제어 : React에서 자주 사용되는 Debounce와 Throttle 기능도 제공

• _.debounce : 함수가 일정 시간 동안 호출되지 않으면 한 번 실행
• _.throttle : 일정 시간 간격으로 한 번씩 함수 실행

 

React에서 Lodash를 사용해 성능 최적화와 반복 작업을 줄이는데 효과적임

_.debounce와 _.throttle을 사용하면 onChange나 scroll 이벤트에서 불필요한 재렌더링을 줄일 수 있음

 

Lodash 설치 및 사용 예시

npm install lodash

 

사용 예시 :

import _ from 'lodash';

const handleInputChange = _.debounce((value) => {
  console.log("Search input:", value);
}, 300);

 

Lodash의 장점과 주의점

• 장점 : 코드 가독성과 재사용성이 높아짐
• 주의점 : 전체 라이브러리를 임포트하면 프로젝트의 번들 크기가 커질 수 있음. 필요한 함수만 개별적으로 설치하거나 임포트하여 사용하면 번들 크기를 줄일 수 있다