useThrottle 사용자 지정 훅 구현

디바운스는 각 이벤트마다 타이머를 간단히 재설정합니다. 스로틀은 마지막 실행 시점을 능동적으로 추적하고 다음 실행을 할 만큼 시간이 지났는지 판단해야 합니다. 이를 위해 렌더링 사이에 시각 정보를 유지해야 하므로 구현이 디바운스보다 조금 더 복잡합니다.

마지막 실행 시각은 렌더링 사이에 유지되어야 하지만 그 자체로 재렌더링을 발생시켜서는 안 되므로 useRef가 적합합니다. 시각 정보를 const lastRunTime = useRef(Date.now())로 저장합니다. 상태와 달리 참조를 업데이트해도 재렌더링이 발생하지 않으므로 스로틀 로직이 추가 주기 없이 효율적으로 실행됩니다.

useThrottle(value, delay) 훅은 입력 값의 스로틀된 버전을 반환합니다. 계약은 useDebounce와 유사합니다. 임의의 값과 지연 시간을 받아 스로틀된 값을 반환합니다. 컴포넌트는 같은 방식으로 사용하므로 서로 다른 타이밍 의미에 맞춰 그대로 교체해 사용할 수 있는 대안이 됩니다.

후행 에지 스로틀은 각 간격의 끝에서 값을 업데이트합니다. 새 값이 들어오면 남은 간격 시간만큼 setTimeout을 예약합니다: delay - (Date.now() - lastRunTime.current). 타이머가 실행되면 상태를 업데이트하고 새로운 lastRunTime을 기록합니다. 정리 과정에서 이전 타이머를 취소하십시오.

선행 에지 스로틀은 첫 번째 값을 즉시 적용하고 간격이 만료될 때까지 이후 값은 무시합니다. Date.now() - lastRunTime.current >= delay인지 확인한 다음 상태를 업데이트하고 시간을 기록합니다. 그렇지 않으면 업데이트를 건너뜁니다. 이렇게 하면 첫 동작에는 즉시 피드백을 제공하고 그 이후에는 냉각 기간을 둘 수 있습니다.

가장 좋은 사용자 경험은 두 방식을 함께 사용하는 경우가 많습니다. 첫 이벤트에는 즉시 응답하고(선행), 간격이 지난 후에는 최종 상태도 반드시 적용합니다(후행). 이렇게 하면 사용자는 빠른 초기 응답을 확인할 수 있고, 움직임이 멈춘 후에는 최종 값이 항상 적용되므로 종료 상태가 이전 값으로 남지 않습니다.

대기 중인 시간 초과 ID를 useRef에 저장하십시오: const timeoutRef = useRef(null). 새 시간 초과를 예약하기 전에 clearTimeout(timeoutRef.current)를 호출하여 기존 시간 초과를 취소합니다. 이렇게 하면 여러 타이머가 겹쳐 하나의 스로틀 간격 안에서 여러 번 업데이트되는 것을 방지할 수 있습니다.

구성 요소가 마운트 해제될 때 대기 중인 후행 업데이트를 취소하려면 useEffect의 정리 함수에서 clearTimeout(timeoutRef.current)를 호출해야 합니다. 그렇지 않으면 마운트 해제 후에도 대기 중인 시간 초과가 실행되어 마운트 해제된 구성 요소의 상태를 설정하려고 하며, 이로 인해 리액트 경고가 발생할 수 있습니다.

값 기반 훅 대신 useCallback 기반 스로틀링 훅을 만들 수도 있습니다: useThrottledCallback(fn, delay)는 함수의 스로틀링된 버전을 반환합니다. 분석 추적기처럼 스로틀링하려는 대상이 반응형 값이 아니라 함수 호출인 경우 이 방식이 더 유연합니다.

제스트 테스트에서는 jest.useFakeTimers()를 사용하여 시간을 제어하십시오. 1000밀리초 지연으로 스로틀을 설정하고, 빠르게 값 10개를 변경한 다음 가상 시간을 500밀리초 진행하여 업데이트가 1~2번만 발생했는지 확인합니다. 다시 500밀리초를 진행하고 후행 업데이트가 실행되는지 검증합니다. 이렇게 하면 스로틀 동작을 결정론적으로 검증할 수 있습니다.

리액트는 렌더링 중 상태 업데이트를 일괄 처리합니다. 상태 업데이트에 적용하는 스로틀은 이 모델 안에서 자연스럽게 작동합니다. 다만 리액트 18 동시 모드에서는 렌더링이 중단될 수 있다는 점에 유의하십시오. 실제 시계 시간을 사용하는 Date.now() 기반의 스로틀 로직 자체는 리액트의 일정 관리 방식에 영향을 받지 않습니다.

스로틀링에는 useRef를 사용하여 마지막 실행 시간을 추적하는 작업이 필요합니다. 훅은 선행 에지(즉시 적용), 후행 에지(지연 적용) 또는 두 방식을 모두 구현할 수 있습니다. 시간 초과 ID는 항상 참조에 저장하고 정리 과정에서 취소하십시오. 함수 기반 사용 사례에는 useThrottledCallback 패턴을 사용하는 것이 좋습니다. 신뢰성을 높이려면 가짜 타이머로 테스트하십시오.