디바운싱과 쓰로톨링

디바운싱 Debouncing

연이어 발생한 이벤트를 하나의 그룹으로 묶어 처리하는 방식으로 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용된다. 마지막 호출이 발생한 후 일정 시간이 지날 때까지 추가적 입력이 없을 때 실행이 된다. 디바운싱이 사용되는 대표적인 예제로 검색이 있다.

 

검색을 할 때 엔터를 치지 않더라도, 사용자가 입력을 멈추고 일정 시간이 지나면 자동으로 함수를 실행시켜 검색 결과를 보여주는 것이다. Lodash라는 자바스크립트의 유틸리티 라이브러리에 디바운싱 기능을 가지고 와서 쓰면 된다.

 

디바운싱 예제 : 검색

import { useQuery, gql } from "@apollo/client";
import { ChangeEvent, MouseEvent, useState } from "react";
import {
  IQuery,
  IQueryFetchBoardsArgs,
} from "../../src/commons/types/generated/types";
import _ from "lodash";

const FETCH_BOARDS = gql`
  query fetchBoards($search: String, $page: Int) {
    fetchBoards(search: $search, page: $page) {
      _id
      writer
      title
    }
  }
`;

export default function SearchPage() {
  // const [search, setSearch] = useState("");

  const { data, refetch } = useQuery<
    Pick<IQuery, "fetchBoards">,
    IQueryFetchBoardsArgs
  >(FETCH_BOARDS);

  const getDebounce = _.debounce((data) => {
    refetch({ search: data, page: 1 });
  }, 200);

  const onChangeSearch = (event: ChangeEvent<HTMLInputElement>) => {
    getDebounce(event.target.value);
  };

  // const onClickSearch = () => {
  //   refetch({ search: search, page: 1 });
  // };

  const onClickPage = (event: MouseEvent<HTMLSpanElement>) => {
    if (event.target instanceof Element)
      refetch({ page: Number(event.target.id) });
  };

  return (
    <div>
      <h1>검색 페이지!!!</h1>
      검색어입력: <input type="text" onChange={onChangeSearch} />
      {/* <button onClick={onClickSearch}>검색</button> */}
      {data?.fetchBoards.map((el) => (
        <div key={el._id}>
          <span> {el.writer} </span>
          <span> {el.title} </span>
        </div>
      ))}
      {new Array(10).fill(1).map((_, index) => (
        <span key={index + 1} onClick={onClickPage} id={String(index + 1)}>
          {` ${index + 1} `}
        </span>
      ))}
    </div>
  );
}

위 코드블록에서 주석처리된 것은 버튼을 눌렀을 때 검색결과가 나오게 하는 것이고 디바운스는 실시간 검색을 가능케 한다.

  const { data, refetch } = useQuery<
    Pick<IQuery, "fetchBoards">,
    IQueryFetchBoardsArgs
  >(FETCH_BOARDS);

  const getDebounce = _.debounce((data) => {
    refetch({ search: data, page: 1 });
  }, 200);

  const onChangeSearch = (event: ChangeEvent<HTMLInputElement>) => {
    getDebounce(event.target.value);
  };

이 부분을 중점으로 보면 되는데  onChangSearch 함수에서 input창에 event.target.value가 들어오면 디바운스가 실행되어 디바운스 함수의 data 부분에 event.target.value로 들어오게 되고 useQuery에서의 search 영역과 event.target.value가 맞는 값만 1페이지에 표기를 해준다. 그리고 200은 0.2초를 의미하여 onChangeSearch 함수가 실행되고 0.2초 뒤에 디바운스 기능이 작동됨을 의미한다.

 

쓰로톨링

연이어 발생한 이벤트에 대해 일정한 delay를 포함 시켜, 연속적으로 발생하는 이벤트는 무시하는 방식으로 사용된다. 지정한 delay 동안 호출된 함수는 무시하는데 대표적인 예제로 스크롤이 있다.

 

스크롤을 올리거나 내릴 때면 스크롤 이벤트가 많이 발생된다. 스크롤 이벤트가 발생할 때 기능을 구현하게 되면 스크롤 이벤트마다 기능이 나타나 렉이 많이 걸린다. 그 때 쓰는 것이 쓰로톨링이다.