Debounce로 버튼 중복호출 막기 (useCallback 사용해 함수재생성 방지까지)

Dahee Ahn

Published in

roubit.me

6 min readMar 5, 2023

안녕하세요 루빗 개발팀 보라입니다😊
그동안 블로그 업로드가 뜸했죠!
앞만 보고 달려온 우리팀… 이제는 발자취도 남겨야겠다 싶어,
1주일 1블로그 업로드를 목표로 삼았습니다!

쓰는 동안은 참 귀찮기도 하지만, 오래 두고 봤을 때
기록은 무한한 가치가 있답니다!

꾸준한 업로드 기대 부탁드리며,,, 허허
그럼 시작합니다!

Debounce 도입 배경

아래 화면은 루빗 앱에서 진행되는 회원가입의 최종 화면이다.

- "이대로 시작할래" 버튼을 누를 때 회원가입 API 호출이 일어난다.

- API 호출 결과, DB에 User가 하나 생성된다.

- 이 때 "이대로 시작할래" 버튼을 여러번 누른다면? User가 여러개 생성된다.

- 그렇다면 User가 여러개 생성되는 것을 방지해야한다.

- 방지하기 위해 버튼을 누르는 순간 loading state를 true로 만들어 해당 버튼을 비활성화 시킨다.

위 조건을 코드로 구현하면 아래와 같다.

const [totalSignupLoading, setTotalSignupLoading] = useState<boolean>(false);

/** 회원가입 */
const signup = () => {
	setTotalSignupLoading(true); // 회원가입 API 호출 전, loading state를 true로 설정.
    
    // call signup api
    
    // after signup api
    setTotalSignupLoading(false); // 회원가입 API 결과 받은 후, loading state를 false로 설정.
};

/** 버튼 */
const SubmitButton = () => {
	return (
    	<Button disabled={totalSignupLoading} title="이대로 시작할래!" onPress={signup} />
    );
};

그런데.. 이렇게 하는데도 loading을 true로 만들어주기 직전에 버튼을 와다다다 눌러버리면 여전히 중복 호출은 존재한다. (많지는 않다.)

-> 버튼 비활성화를 state로 관리하기에는 완벽하지 않다.

그러다가, 참여하고 있는 개발스터디에서 debounce 개념을 알게 되었다.

debounce란,

반복적인 특정 동작을 반복되는 과정에서 강제적으로 대기하는 것이다.
연속적으로 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 처음이나 마지막으로 실행된 함수를 처리하는 방식으로 사용된다.

출처: https://www.freecodecamp.org/korean/news/debounce-dibaunseu-javascripteseo-hamsureul-jiyeonsikineun-bangbeob-js-es6-yeje/

사용해보자!
lodash 라이브러리에 이미 debounce가 정의되어 있으므로, 해당 모듈을 깔고 import만 하면 된다. (lodash를 사용하지 않고도, debounce 함수를 직접 만들 수도 있다. )

import _ from "lodash";

/** 회원가입 */
const signup = _.debounce(() => {
    // call signup api
}, 1000);

/** 버튼 */
const SubmitButton = () => {
	return (
    	<Button title="이대로 시작할래!" onPress={signup} />
    );
};

-> 이렇게 사용하면 signup 함수는 1초를 기다린 후에 실행된다.

첫호출 이후 1초동안의 함수호출을 막을 수는 없을까? 가능하다.