React : debounce

debounce

※ 설명
- 동일한 이벤트가 반복해서 실행되는 경우 일정 시간 지연 시킨 후 처리한다.
- 일정 시간 안에 동일 이벤트가 다시 발생하면 마지막 발생 시점부터 일정 시간을 지연한다.

※ 예시

import React, { useEffect, useState } from "react";

export default function CleanUp() {
  const [text, setText] = useState("");
  const [textIsValid, setTextIsValid] = useState(false);

  // useState로 선언한 text의 값이 바뀔때마다 useEffect 내부 실행
  useEffect(() => {
    // 0.5초 마다 Validation 진행
    const timer = setTimeout(() => {
      console.log("Validation");
      // 텍스트가 있을 경우 true
      setTextIsValid(text.trim());
    }, 500);

    // 0.5초가 되기 전에 값이 바뀌면 Clean Up 함수 실행
    return () => {
      console.log("Clean Up!!!");
      clearTimeout(timer);
    };
  }, [text]);

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
    </div>
  );
}​

※ 화면
- 불필요한 Validation을 수행하지 않을 수 있다.
- setTimeout 함수 안에 있는 Validation이 시작하기 전에 새로운 input 값을 입력할 경우 Clean Up 함수를 사용해 clearTimeout을 해주는 방식이다.