[React] debounce로 실시간 입력 검증 구현하기

🧐 Intro

회원가입 페이지를 개발하던 중, 아이디 중복검사를 수행하는 API 호출이 필요했고 이를 인증 요청 버튼과 같은 트리거 없이 실시간으로 검증하는 로직을 사용하고자 했다.

왜 debounce여야 할까❓

API 요청에서 debounce를 사용하는 주 이유는 불필요한 API 호출을 줄이고 성능을 최적화하기 위해서이다.

회원가입 폼에서 아이디를 입력하면, 입력한 값이 바뀔 때마다 해당 값을 인자로 API를 호출해서 사용 가능한 아이디인지 검증이 필요한데 값이 바뀔때마다 호출을 하면 불필요한 호출이 생긴다.

때문에, 이 호출 시점의 컨트롤이 필요하다.

사용 방법

import debounce from "lodash/debounce";

const username = watch("username");

const debounceVerify = debounce((username) => {
    if (username) checkUsername(username);
  	// checkUsername은 API 호출 함수를 의미
  }, 2000);

  useEffect(() => {
    if (!username) {
      setIsVerifying(false);
      setIsVerifyingMsg("");
    } else {
      debounceVerify(username);
    }

    return () => debounceVerify.cancel();
  }, [username]);

• 사용자가 입력을 멈춘 후, 2초 동안 추가 입력이 없을 때만 API 요청
• 2초 이내에 입력을 수행하면, API 요청이 한 번만 발생
• debounce.cancel()을 통해 이전의 불필요한 요청 취소 가능

적용

정리

• debounce를 사용하면 불필요한 API 요청을 방지하여 서버 부하를 줄일 수 있다.
• 특히 검색, 입력 검증, 자동완성, 필터링 등의 실시간 처리에서 효과적이다.
• 적절한 debounce 시간을 설정하여 사용자 경험을 개선할 수 있다.