중복 submit방지 ( Lodash throttle & debounce)

폼 제출시 연속으로 클릭하면 여러번 호출되어 중복으로 등록되는 경우가생겨 Lodash 라이브러리를 사용하기로 했다

 

Lodash 모듈화, 성능 및 기타 기능을 제공하는 자바스크립트 유틸리티 라이브러리

https://lodash.com/

Throttle와 Debounce

Throttle

throttle(func, [wait=0], [options={}])

=>throttle은 콜백 함수(func)를 일정 주기(wait) 내에 한 번만 호출한다. 특히 scroll, mousemove 이벤트와 같이 짧은 시간에 굉장히 많이 실행되는 이벤트에 사용한다.

• 스로틀링(Throttling)은 함수가 지정된 시간 동안 최대 한 번 호출되도록 하는 프로그래밍 방법이다
• 스로틀링은 함수를 호출할 수 있는 최대 횟수를 조절한다

 

Debounce

debounce(func, [wait=0], [options={}])

=>debounce는 이벤트가 끝난 뒤에 설정해둔 시간(wait)이 지나야 콜백(func)이 실행 된다.

• 디바운싱(Debouncing)은 시간이 많이 걸리는 작업이 자주 실행되지 않도록 사용되는 프로그래밍 방법이다
• 디바운싱은 함수가 실행되기 전에 일정 시간을 대기하도록 합니다. 즉, 함수가 호출되는 속도를 제한한다.
• 함수가 여러 번 호출되면, 일정 시간이 지난 후 마지막에 호출된 함수만 실행되고 이전의 호출된 함수는 무시된다
  
  

import React, { useState, useCallback } from "react";
import { debounce } from "lodash";


const InputText = () => {
  const [value, setValue] = useState("");
  const [search, setSearch] = useState("");

  const delayValue = useCallback(
    debounce((value) => {
      setSearch(value);
    }, 1000),
    []
  );
  const InputChange = (e) => {
    delayValue(e.currentTarget.value);
    setValue(e.currentTarget.value);
  };

  return (
    <>
      <input
        className="input"
        type="text"
        placeholder="Debounce 입력하세요"
        value={value}
        onChange={InputChange}
      />
      <p className="search">{search}</p>
    </>
  );
};

export default InputText;