[1105] 서치라이트 29일차

한별·2024년 12월 3일

서치라이트

목록 보기

31/40

1. Today's Tasks

KAN-206 - FE 랜딩 리뉴얼 - FAQ 화면 시작

2. Learnings and Questions

debounce

debounce를 사용하기 위해 lodash 패키지를 까는 것은 너무 비효율적이다. 간단한 debounce 함수를 이용해보자!

// src/utils/debounce.ts
export const debounce = <T extends (...args: any[]) => any>(
  fn: T,
  delay: number,
) => {
  let timeout: ReturnType<typeof setTimeout>;

  return (...args: Parameters<T>): ReturnType<T> => {
    let result: any;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      result = fn(...args);
    }, delay);
    return result;
  };
};

사용 예제

import { debounce } from '@/utils/debounce';

function useDebounceSearch() {
  const [keyword, setKeyword] = useState<string>('');

  const getDebounce = debounce((data) => {
    setKeyword(data);
  }, 500); // 0.5초 동안 이벤트가 발생하지 않으면 setKeyword(data)를 실행

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

  return { keyword, onChangeSearch };
}