2.1 KiB
**스로틀링(Throttling)**과 **디바운싱(Debouncing)**은 창 크기 조절(resizing), 키보드 타이핑, 스크롤과 같이 짧은 시간 동안 연속적으로 과도하게 발생하는 사용자 이벤트의 함수 실행 빈도를 제어하여 성능 병목 현상을 방지하는 최적화 기법입니다.
이러한 기법을 적용하면 매 이벤트 틱(tick)마다 React가 불필요하게 리렌더링되거나 무거운 연산을 반복하는 것을 막을 수 있습니다.
1. 디바운싱 (Debouncing) 연이어 발생하는 이벤트를 하나로 묶어, 특정 시간 동안 추가 이벤트가 발생하지 않을 때 마지막에 단 한 번만 핸들러를 실행하는 기법입니다. 예를 들어, 사용자가 화면 크기 조절(resize)을 멈추거나 검색어 입력을 잠시 멈췄을 때만 API 호출이나 레이아웃 재계산 로직이 처리되도록 할 때 매우 유용합니다.
2. 스로틀링 (Throttling) 이벤트가 연속해서 발생하더라도 정해진 시간 간격 당 최대 한 번씩만 함수가 실행되도록 강제하는 기법입니다. 마우스 이동(mousemove)이나 스크롤 시 화면을 지속적으로 업데이트해야 하지만, 매 프레임마다 연산하는 것은 시스템 자원을 낭비하므로 일정한 주기(예: 100ms)로 실행을 제한할 때 사용됩니다.
3. 번들 최적화(Tree Shaking)와 함께 사용하기 React 애플리케이션에서 이 기법을 구현하기 위해 lodash와 같은 유틸리티 라이브러리를 자주 사용하지만, 패키지를 불러오는 방식에 주의해야 합니다. import _ from 'lodash'와 같이 라이브러리 전체를 불러오면 거대한 코드가 모두 포함되어 초기 로딩 속도를 저하시킵니다.
따라서 사용하지 않는 코드를 제거하는 트리 쉐이킹(Tree Shaking)이 완벽하게 동작할 수 있도록 import { debounce } from 'lodash-es' 또는 import debounce from 'lodash-es/debounce'와 같이 필요한 개별 함수만 명시적으로 가져오는 것이 필수적입니다.