React / Debounce, Throttle

 

Debounce & Throttle

연속적으로 발생하는 함수나 이벤트의 실행 빈도를 줄이기 위해 묶어서 처리하는 기법으로, 최적화를 통한 성능 향상이 목적이다.

 

 

Debounce vs Thottle

 

1) 함수나 이벤트가 연속적으로 발생하는 경우

출처 : 오즈코딩스쿨

 

2) 함수나 이벤트가 연속적이 아닌 끊어서 발생하는 경우

 

출처 : 오즈코딩스쿨

Debounce : 연속적으로 함수나 이벤트가 발생 후 일정 시간 동안 추가 이벤트/함수가 없다면 실행

Throttle : 연속적으로 함수나 이벤트가 발생하는 동안 일정 시간 간격(텀을 가지고)으로 실행 

 

 

 

---

 

 

 

Debounce

연속적으로 발생한 이벤트를 하나로 처리하는 방식으로, 마지막에 한 번에 묶어서 처리해도 상관 없을 때 사용한다.

검색 자동 완성 같은 사용자 입력 처리에 유용하다.

 

 

예시

이번에도 이전에 실습한 동물 정보 사이트를 가져왔다... https://hydeveloper.tistory.com/195

일단 Debounce를 쓰기에 앞서 살짝 코드를 수정해서 검색어가 입력될때마다 바로 검색 결과가 나오도록 했다.

 

App.jsx의 일부

<input
  value={inputValue}
  onChange={(event) => {
    setInputValue(event.target.value);
    // inputValue가 아닌 event.target.value를 사용하는 이유
    // inputValue는 변경되기 이전의 상태여서 만약 아래 주소에 inputvalue를 넣을 경우
    // 기존 키워드에서 임의로 입력을 한번 더 해야만 그 검색어 결과가 반영된다... (한단계 느리게 url이 업데이트됨)
    navigate(`/search?animal=${event.target.value}`);
  }}
/>
<button onClick={() => navigate(`/search?animal=${inputValue}`)}>
  검색
</button>

 

Search.jsx의 일부

const [searchParams] = useSearchParams();
const param = searchParams.get("animal");
const reg = getRegExp(param);
const filteredData = data.filter((el) => el.name.match(reg));

 

이렇게 할 경우.. 

만약 내가 '판다'를 입력하고자 한다면 오타가 없다는 가정하에 ㅍ ㅏ ㄴ ㄷ ㅏ 최소 다섯번은 서버 요청을 보내야 한다. 이런 식의 검색 이벤트가 수차례 발생된다면 적어도 서버나 청구서 둘 중 하나는 터질 수 있다...

 

 

이제 Debounce를 사용해서 수정할 건데, 아무래도 일정 시간이 지난 후에 함수/이벤트를 수행하기 때문에 setTimeout같은 타이머 함수가 필요하다.

 

  const [searchParams] = useSearchParams();
  const param = searchParams.get('animal');
  const reg = getRegExp(param);

  // filteredData가 변경될 때 debounce를 실행하기 위해 새로운 상태 생성
  const [filteredData, setFilteredData] = useState(data);
  useEffect(() => {
    const debounceTimer = setTimeout(() => {
      const newFilteredData = data.filter((el) => el.name.match(reg));
      setFilteredData(newFilteredData);
    }, 1000); // 1초 동안 추가 입력이 일어나지 않으면 검색 결과를 보여줌
    return () => clearTimeout(debounceTimer);
  }, [param]);

 

• param이 바뀔 때마다 useEffect가 실행
• setTimeout으로 1초 뒤에 필터링 수행
  => 그러나 1초 안으로 다른 param이 입력되면 이전 타이머를 클리어함수로 제거
  => 1초 뒤에도 param이 바뀌지 않는다면 검색 필터링 실행 
• 위 예시에서 Debounce는 입력이 멈춘 뒤, 1초가 지나서 실행되는 구조를 가지고 있다.

 

 

 

 

---

 

 

Throttle

이벤트를 일정 주기마다 발생하도록 하는 기술로, 중간 중간 끊기지 않는 인터랙션이 필요할 때 사용한다.

마우스 이동, 스크롤 이벤트같이 빈번하게 발생하는 이벤트를 처리 시 유용하다.

 

 

예시

 

위의 동물 정보 사이트를 이번엔 throttle 방식으로 바꿔서 사용할 것이다.

 

일정 시간마다 실행되는 만큼 시간 정보를 가지고 있는 객체를 따로 만들어줘야 하는데, 이 예시에서는 남은 시간을 계산해 지연시키는 방식으로 구현하고 있다.

예시에서는 1초마다 실행하므로 setTimeout의 매개변수 중 delay 부분을

1000- (현재 시간 - 이전 실행 시간)으로 작성해 1초마다 실행될 수 있도록 하는 것이 핵심이다.... 

강의에서 time 계산 방식을 설명해주시기 위해 작성해주신 예시

 

  const [searchParams] = useSearchParams();
  const param = searchParams.get('animal');
  const reg = getRegExp(param);
  // filteredData가 변경될 때 debounce를 실행하기 위해 새로운 상태 생성
  const [filteredData, setFilteredData] = useState(data);

  // 이전 실행 시간을 기억해두는 변수
  // useRef는 컴포넌트가 리렌딩돼도 값이 유지되기 때문에 사용!!
  const time = useRef(new Date());

  useEffect(() => {
    // 현재 시간, time.current와 비교해서 얼마나 시간이 흘렀는지 측정을 위함
    const newTime = new Date();
    
    const throttleTimer = setTimeout(() => {
      const newFilteredData = data.filter((el) => el.name.match(reg));
      setFilteredData(newFilteredData);
      // 실행되었으니 현재 시각으로 갱신
      time.current = new Date();
      // 마지막 실행이 0.6초 전이라면, 1000 - 600 = 400ms 후에 실행되도록 예약
      // 즉 1초에 한번만 실행되도록 함
    }, 1000 - (newTime - time.current));
    // 클리어 함수
    return () => clearTimeout(throttleTimer);
  }, [param]);

 

 

 

비교

debounce 방식과 throttle 방식을 비교하기 위해 setTimeout 내에 console.log를 넣어 어떻게 실행되는지 확인해봤다.

 

debounce 방식

 

 

throttle 방식

 

 

 

 

 

참고
https://velog.io/@jiynn_12/Debounce-%EC%99%80-throttle-%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B3%A0-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90
https://velog.io/@eungbi/JS-debounce-throttle-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
https://pks2974.medium.com/throttle-%EC%99%80-debounce-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-2335a9c426ff