[React] debounce (feat. lodash)

debnounce란 ?

- debounce는 여러 개의 순차적 이벤트 호출을 마지막(또는 처음) 하나의 호출만 하도록 하는 프로그래밍 기법

- 주로 검색, 스크롤 같은 반복적인 이벤트가 일어날 때 사용하며 유명한 라이브러리인 lodash를 설치하면 간단하게 사용할 수 있다.

- 만약 회원가입에서 이메일의 중복확인을 onChange 이벤트로 체크한다고 했을 경우 사용자의 입력마다 API 호출을 하게 되는데 이러면 끔직한 서버 비용폭탄을 맞을 수 있다.

 

debouncing 예제

useEffect(() => {
    console.log(`http 요청 ${formData.email}`);
  }, [formData.email]);

• useEffect를 이용해 email input이 서버에 같은 아이디가 있는지 중복확인하는 코드입니다. console.log() 가 http 에 요청을 보내는 로직이라 생각해보자.
• 의존성 배열에는 formData.email이 변경되면 useEffect가 실행되고 값이 하나 입력될 때마다 요청이 보내지는데 굉장히 비효율적이고 서버에도 사용자에게도 좋지 않은 현상이다.

setTimeout 을 이용한 방법

  useEffect(() => {
    const duplicateCheckEmail = setTimeout(() => {
      if (formData.email) {
        console.log('http 요청');
      }
    }, 500);
    return () => {
      clearTimeout(duplicateCheckEmail);
      console.log('http 요청 캔슬');
    };
  }, [formData.email]);

• 브라우저에서 제공하는 setTimeout 메서드와 useEffect를 이용한 방법이다.
• useEffect의 리턴값으로 함수를 설정하면 컴포넌트가 재 렌더링 되기 전에 함수를 실행한다. 이를 '클린업 함수'라 부르는데 간단하게 실행 순서는 이렇다.
  • input 값 입력 (이벤트 발생)
  • setTimeout 설정
  • 또 다른 input값 입력
  • 클린업 함수 실행으로 인한 이전 setTimeout 제거
  • 컴포넌트 재 렌더링 후 마지막 setTimeout 실행
• 이는 리액트 훅 라이프사이클을 살펴보면 더 자세히 알 수 있다.

lodash 라이브러리 이용하기

• lodash 라이브러리는 공통으로 사용해야 하는 일반적인 함수들을 모아서 제공해주는 라이브러리
• webpack을 이용한 프로젝트 구성 시 lodash 라이브러리를 이용할 때 import { debounce } from 'lodash' 형식으로 불러오게 된다면 해당 import 구문은 tree shaking은 적용되지 않는다.❗️
• lodash 라이브러리는 commonJS 방식으로 구성 된 라이브러리 이며 webpack은 ES6 모듈 방식의 라이브러리만 tree shaking을 지원하기에 lodash-es 모듈을 사용하거나 import { debounce } from 'lodash/debounce' 같이 명시해서 사용해야한다. ⭐️

  // 잘못된 방법
  
  useEffect(() => {
    if (formData.email) {
      debounce(() => {
        console.log('http 요청');
      }, 500);
    }
  }, [formData.email]);

• 해당 코드는 동작하지 않는다.
• 이유는 컴포넌트 내부에 debounce를 정의한 함수가 있을 경우 해당 컴포넌트가 formData.email (state) 가 변경됨에 따라 리렌더링이 된다면 debounce 함수도 재생성 되면서 기존의 debounce를 초기화 해버리기 때문.

  const debounceEmailValidMutation = useCallback(
    debounce(() => {
      console.log('http 요청');
    }, 500),
    [],
  );

  useEffect(() => {
    if (formData.email) {
      debounceEmailValidMutation();
    }
  }, [formData.email]);

• 해결 방법은 debounce 함수를 useCallback으로 감싸 디펜던시에 빈 배열을 넣어 함수를 재생성 하지 않도록 막아준 후 useEffect에 넣어주면 단 한번의 요청만 가게된다. 👍
• 코드의 가독성을 생각하면 개인적으로 lodash 라이브러리를 이용하는 방법이 더 좋은거 같다.