KT AIVLE School 빅프로젝트 - 텍스트 입력 Debounce 처리

사용하게된 이유

RTK의 useAppSelector, useAppDispatch를 사용하여 state를 갱신하고 가져오는 과정이 있었는데, dispatch를 할 때마다 관련된 state들이 리랜더링이 일어나면서 미리보기를 제공하는 영상과 이미지가 플리커 현상이 일어났습니다.

 

뿐만 아니라 tiptap 라이브러리를 사용했었는데, tiptap의 useEditor의 인자로 객체의 안에 onUpdate 키의 값으로도 입력할 때마다 리랜더링 되는 현상을 늦게 발견하게 되었습니다. 불필요한 리랜더링은 줄이는게 맞다는 판단이 들어서 사용하게 되었습니다.

debounce 함수 코드

export default function debounce<F extends (...args: any[]) => any, T>(
  func: F,
  delay: number
): (this: T, ...args: Parameters<F>) => void {
  let timeoutId: NodeJS.Timeout;
  return function debouncedFunction(this: T, ...args: Parameters<F>): void {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const onUpdate = useCallback(
  debounce((content) => dispatch(postActions.writingContent(content)), 500),
  []
);

함수와 딜레이 시간을 인자로 받으면서 타입으로 F를 주는 것은 처움봤습니다. 게다가 this를 func.apply를 통해서 그대로 전달해주는 것이 신기했습니다. 그래서 저는 this의 전달과 apply의 쓰임새를 배웠습니다.

 

그리고 다른 입력값들을 받아서 리랜더링을 해줘야 하는 상황이 생기기 때문에 useCallback으로 debounce 함수를 감싸주었습니다. 나중에 만약 연관 검색어를 받는 GET요청을 보낸다면 이 debounce 함수를 통해 요청을 보내고 화면에 보여지도록 하는 것을 시도해봐도 좋겠다고 생각했습니다.