프로젝트/WINE
디바운스 훅
인재재
2024. 12. 2. 21:35
Debounce
사진 처럼 와인가격을 input으로 조절하면 그 범위에 있는 가격의 와인데이터들이 불러와지는 로직을 짯는데 인풋의 gap이 하나라도 바뀔때마다 get요청을 보내기때문에 드래그를 할때마다 api get요청을 우수수 받는 문제가 있었다.
이를 디바운싱(debouncing) 과 쓰로틀링(throttling)을 이용하여 개선해보고자 하였다. 둘 중 어느 것을 사용하는게 적합할까?
- 디바운싱은 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것
- 쓰로틀링은 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
필터에서 사용자가 게이지 바를 움직일 때마다 API 요청을 보낸다면, 디바운싱을 통해 입력이 끝난 시점에만 (즉 마지막 함수 호출 시점) 요청이 이루어지는게 좋다는 생각을 하였다!
와인 가격 범위를 설정할 때, 사용자가 드래그 중인 중간 값보다 최종적으로 멈춘 값이 중요하기 때문이다.
쓰로틀링은 특정 주기마다 요청을 보내므로 드래그 중간의 값으로도 API 요청이 발생할 수 있어 불필요한 중간 데이터 요청이 많아질 수 있다는 생각을 하였다.
디바운스를 사용하면 사용자가 입력을 멈춘 후 요청이 실행되므로, 화면이 필요 이상으로 자주 갱신되지 않아 부드럽고 직관적인 사용자 경험을 제공할 것이다!
useDebounce 커스텀 훅을 만들어서 해당 필터 바 뿐 아니라 필요한 부분(검색 필터등)에서 사용할 수 있도록 하였다
import { useEffect, useState } from "react";
const useDebounce = <T>(value: T, delay: number) => {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedValue(value);
}, delay); //delay만큼 대기 후 업데이트
return () => {
clearTimeout(timer);
};
}, [value]); // value 변경마다 호출
return debouncedValue;
};
export default useDebounce;
