SNS 로그인 버튼을 여러 번 눌러도 반응하지 않는 문제 해결

문제 상황

카카오, 페이스북, 네이버와 같은 SNS 로그인 버튼을 연속해서 여러 번 눌렀을 때, 버튼이 반응하지 않거나 마지막 클릭에만 로그인 요청이 보내지는 현상이 발생했습니다.

const onSnsLogin = debounce(async (provider: string) => {
  if (provider === "facebook") {
    onLoginFacebook();
  } else {
    await createSnsLoginHandler(provider, goFrom)();
  }
}, 1000);

이 코드에서는 버튼을 여러 번 눌러도 debounce가 마지막 호출만 처리하게 되어, 즉각적인 로그인 시도조차 발생하지 않는 것처럼 보이는 문제가 있었습니다.

 

원인 분석

• lodash.debounce는 기본적으로 마지막 호출만 실행되도록 설계되어 있음
• 즉, 사용자가 여러 번 눌러도 마지막 클릭 이후 1초 동안 아무 동작이 없을 때만 실행됨
• 이로 인해 UI 상으로는 아무 반응이 없는 것처럼 느껴질 수 있음

 

해결 방법

1. leading: true 옵션으로 즉시 실행되도록 설정

const onSnsLogin = React.useMemo(
  () =>
    debounce(async (provider: string) => {
      console.log("onSnsLogin 호출됨:", provider); // 호출 확인용 로그

      if (provider === "facebook") {
        onLoginFacebook();
      } else {
        await createSnsLoginHandler(provider, goFrom)();
      }
    }, 1000, { leading: true, trailing: false }), // 🔥 즉시 실행
  [goFrom, createSnsLoginHandler, onLoginFacebook]
);

• leading: true → 버튼을 클릭하자마자 즉시 실행
• trailing: false → 마지막에 한 번 더 실행되는 것 방지

2. useMemo로 감싼 이유

debounce 함수는 내부에 타이머 상태를 가지므로, 렌더링 때마다 새로 생성되면 debounce 효과가 사라집니다.

따라서 useMemo를 사용해 의존성이 바뀔 때만 생성되도록 방지합니다.

 

디버깅 방법

로그가 호출되는지 확인하기 위해 다음과 같이 console.log()를 추가합니다:

console.log("onSnsLogin 호출됨:", provider);

• 클릭할 때마다 로그가 바로 찍히면 정상 동작
• 1초 이내에 여러 번 눌러도 로그는 한 번만 찍혀야 함

 

최종 결과

• 첫 클릭에 바로 반응하는 SNS 로그인 버튼 구현
• debounce를 이용한 과도한 요청 방지
• 사용성(UX) 개선 및 예측 가능한 동작 구현