React에서 더블 클릭 방지하기

더블 클릭이 문제가 되는 이유

더블 클릭은 사용자가 빠르게 두 번 클릭하는 것을 의미합니다. 이것이 문제가 되는 이유는 두 번의 클릭 이벤트가 거의 동시에 발생하면, 예를 들어, 데이터를 두 번 저장하거나, 페이지를 두 번 이동하는 등의 원치 않는 결과를 초래할 수 있습니다.

방지 방법 1: 상태 변수 사용

React에서는 상태(state) 변수를 사용해 더블 클릭을 방지할 수 있습니다. 먼저, 상태 변수를 생성하여 클릭 가능한 상태인지 확인합니다. 버튼을 클릭할 때 이 상태 변수의 값을 변경하여 두 번째 클릭을 무시하도록 할 수 있습니다.

const [isClicked, setIsClicked] = useState(false);

const handleClick = () => {
  if (!isClicked) {
    // 로직 실행
    setIsClicked(true);
    setTimeout(() => setIsClicked(false), 300); // 300ms 후에 다시 클릭 가능하게 함
  }
};

방지 방법 2: debounce 함수 사용

debounce 함수는 여러 번 발생하는 이벤트를 일정 시간 동안 하나로 묶어 처리하는 방법입니다. 이를 사용하면 빠르게 연속해서 발생하는 클릭 이벤트를 하나의 이벤트로 처리할 수 있습니다.

const debounce = (func, delay) => {
  let inDebounce;
  return function () {
    clearTimeout(inDebounce);
    inDebounce = setTimeout(() => func.apply(this, arguments), delay);
  };
};

const handleClick = debounce(() => {
  // 로직 실행
}, 300);

정리

React에서 더블 클릭을 방지하는 방법은 주로 두 가지입니다. 첫 번째는 상태 변수를 사용하여 클릭을 제어하는 것이고, 두 번째는 debounce 함수를 사용하여 연속된 클릭을 하나로 처리하는 것입니다. 이 두 방법을 적절히 활용하면 원하지 않는 더블 클릭으로 인한 문제를 효과적으로 방지할 수 있습니다.