React Developer Tools를 활용한 React 애플리케이션 성능 최적화

debounce의 개념과 사용법

debounce의 개념

Debounce는 자바스크립트에서 특정 함수가 반복적으로 호출되는 것을 제어하기 위해 사용되는 기법입니다.
주로 사용자가 빠르게 반복해서 실행하는 이벤트(예: 키 입력, 윈도우 리사이즈, 스크롤 등)에 대해 마지막 이벤트만
실행되도록 제어합니다.

Debounce의 사용법

const searchInput = document.getElementById('search-input');

function handleSearch(event) {
  console.log('API 요청: ', event.target.value);
}

const debouncedSearch = debounce(handleSearch, 300);

searchInput.addEventListener('input', debouncedSearch);

//사용자가 텍스트 입력을 할 때 debounce를 사용하여 API 요청을 최적화하는 예제입니다.

Debounce 함수는 자바스크립트로 직접 구현할 수 있으며, 일반적으로 lodash 같은 라이브러리를 통해 쉽게 사용할 수도 있습니다.

Throttle의 개념과 사용법

Throttle의 개념

Throttle(쓰로틀)는 특정 함수가 짧은 시간 간격으로 반복해서 호출되는 것을 제어하는 기법입니다.
Throttle은 일정한 시간 간격 내에서 함수가 한 번만 실행되도록 제한하여 과도한 함수 호출로 인한 성능
문제를 방지합니다.

Throttle의 사용법

function handleScroll() {
  console.log('Scroll event at', new Date().toISOString());
}

const throttledScroll = throttle(handleScroll, 200);

window.addEventListener('scroll', throttledScroll);

//스크롤 이벤트에서 throttle을 사용하여 성능을 최적화하는 예제입니다.

debounce와 throttle의 차이점

Debounce는 한 묶음의 이벤트를 하나의 이벤트로만 처리한다는 느낌이 강해서
이벤트 묶음이 끝나야, 즉 일정 시간 동안 이벤트가 발생하지 않아야 합니다.

Throttle은 이벤트가 끊임 없이 일어나는 상황에서
일정 시간마다 주기적으로만 실제 함수를 실행(이벤트를 리슨)합니다.