UI에서 디바운스와 스로틀이 중요한 이유

일부 DOM 이벤트는 매우 높은 빈도로 발생합니다. keypress 이벤트는 키를 누를 때마다 발생합니다. scroll 이벤트는 스크롤하는 동안 초당 수십 번 발생합니다. 사용자가 창 테두리를 끄는 동안 resize 이벤트는 계속 발생합니다. 모든 이벤트를 개별적으로 처리하면 브라우저와 서버 모두에 과도한 부담을 줄 수 있습니다.

키 입력 처리기가 키를 누를 때마다 API를 호출한다면, 사용자가 "React hooks"(11자)를 입력할 때 11개의 네트워크 요청이 발생하며 대부분은 완성되지 않은 검색어에 대한 요청입니다. 마찬가지로 스크롤 픽셀마다 시차 애니메이션을 업데이트하면 초당 수백 번의 React 재렌더링이 발생합니다. 이로 인해 CPU, 네트워크, 배터리가 낭비됩니다.

디바운스는 이벤트 발생이 지정된 기간 동안 멈춘 뒤에 실행되도록 지연합니다. 사용자가 계속 입력하는 동안에는 키를 누를 때마다 타이머가 재설정됩니다. N밀리초 동안 입력이 없어진 후에야 처리기가 한 번 실행됩니다. 디바운스는 "사용자가 어떤 작업을 끝낸 후에 이것을 실행합니다"라는 요구를 해결합니다.

스로틀은 발생하는 이벤트 수와 관계없이 시간 간격마다 최대 한 번만 실행되도록 제한합니다. 사용자가 빠르게 스크롤할 때 100밀리초 스로틀을 적용하면 처리기가 초당 10번을 넘지 않고 실행됩니다. 스로틀은 "정기적으로 실행하되 N밀리초보다 자주 실행하지 않습니다"라는 요구를 해결합니다.

사용자가 입력을 멈춘 후의 최종 값만 중요하다면 디바운스가 적합합니다. 대표적인 사례로는 검색 입력(입력이 잠시 멈춘 후 API 요청 전송), 창 크기 조정 처리기(크기 조정이 끝난 후 레이아웃 재계산), 서버에서 확인하는 양식 필드 유효성 검사(전체 입력을 받은 후 검사)가 있습니다.

연속적인 활동 중에 정기적으로 업데이트하려면 스로틀이 적합합니다. 대표적인 사례로는 스크롤 위치 처리기(초당 최대 30프레임으로 읽기 진행률 표시줄이나 고정 헤더 업데이트), 마우스 이동 추적(분석을 위해 커서 위치 기록), 끌기 이벤트 처리기(과도한 이벤트 발생 없이 끌 수 있는 요소의 위치를 부드럽게 업데이트)가 있습니다.

충분히 이해하지 않고 디바운스나 스로틀을 처음부터 작성하면 마지막 이벤트를 놓치거나(마지막 호출 시점), 잘못된 시점에 실행되거나, 컴포넌트가 마운트 해제될 때 타이머를 정리하지 못하는 등의 버그가 발생합니다. 일반적으로 모든 예외 상황을 올바르게 처리하는 lodash와 같은 라이브러리의 충분히 검증된 구현을 사용하는 편이 좋습니다.

Lodash는 선행 호출 시점과 마지막 호출 시점의 동작을 설정할 수 있는 _.debounce(fn, wait)와 _.throttle(fn, wait)을 제공합니다. 반환된 함수에는 대기 중인 호출을 중단하는 .cancel() 메서드와 즉시 실행하는 .flush() 메서드가 있습니다. React에서는 다시 렌더링할 때 함수가 다시 생성되지 않도록 이러한 함수를 useRef로 감싸야 합니다.

스로틀을 적용하지 않은 스크롤 처리기로 인해 초당 50회의 React 재렌더링이 추가로 발생하는 것만으로도 상당한 CPU를 사용할 수 있으며, 특히 저사양 모바일 기기에서 그 영향이 큽니다. 16밀리초 프레임 예산(초당 60프레임)에서는 프레임이 누락되지 않도록 각 재렌더링이 16밀리초 이내에 완료되어야 합니다. 디바운스와 스로틀은 프레임 속도 문제를 막는 첫 번째 방어선입니다.

모든 고빈도 처리기에 디바운스가 필요한 것은 아닙니다. 이벤트 처리기가 상태를 업데이트하거나 API를 호출하지 않고 값만 읽는다면, 예를 들어 참조에 마지막 마우스 위치를 기록하는 경우에는 디바운스가 필요하지 않습니다. 상태 업데이트, API 호출, DOM 측정과 같이 비용이 많이 드는 작업을 발생시키는 처리기에만 디바운스나 스로틀을 적용하면 됩니다.

컴포넌트가 마운트 해제될 때는 마운트 해제 후 상태가 업데이트되지 않도록 대기 중인 디바운스 호출을 취소해야 합니다. useRef를 사용하여 디바운스된 함수를 저장한다면 useEffect의 정리 과정에서 debouncedFn.cancel()을 호출합니다. Lodash의 디바운스된 함수는 바로 이 목적을 위해 이 메서드를 제공합니다.

검색 필드에서 사용자가 입력을 멈췄을 때 API 호출을 발생시키려면 어떤 기법을 사용해야 합니까?

키 입력, 스크롤, 창 크기 조정과 같은 고빈도 이벤트는 처리기가 모든 이벤트마다 실행되면 성능 문제를 일으킬 수 있습니다. 디바운스는 입력이 멈추기를 기다리므로 검색 입력과 창 크기 조정 처리기에 적합합니다. 스로틀은 빈도를 제한하므로 스크롤과 끌기 작업에 적합합니다. 참조에 저장한 lodash 구현을 사용하고, 컴포넌트가 마운트 해제될 때는 항상 취소해야 합니다.