[074] 플러터 (Flutter) 배우기 - Debounce 이용하여 함수 중복 호출 방지하기(마지막으로 호출한 것만 실행)

안녕하세요 totally 개발자입니다.

 

이 포스팅에서는 debounce 개념을 사용하여 함수의 중복 호출을 막아보도록 하겠습니다. 저번에 다루었던 throttle과 달리 debounce는 함수가 여러 번 호출되었을 때 맨 마지막에 호출한 것만 실행합니다. 그래서 예를 들어 텍스트를 입력할 때 텍스트 변화를 감지하는 onChange 혹은 숫자를 늘리는 행위 즉 장바구니 등의 경우에 사용할 수 있는 방법입니다.

 

먼저 간단한 작동 구조를 먼저 살펴보면 아래와 같습니다.

1. Debounce 변수 선언 (예를 들어, 1초 동안 동일한 값을 마지막에 호출한 것만 체크하겠다는 변수)

2. Debounce를 적용할 함수 선언 (예를 들어, 이메일이 올바른지, 중복되는지를 체크하겠다는 함수)

3. 위 2번에서 선언한 함수를 1번에서 선언한 변수의 listen로 연결 (예를 들어, _debouncer.values.listen((_) => 메소드명());)

4. 위 1번에서 선언한 변수의 setValue 메소드를 통해 함수 호출 (예를 들어, _debouncer.setValue("내용");)

 

바로 코드를 살펴보면서 예제를 살펴보도록 하겠습니다. 전체 소스 코드는 맨 아래에 첨부하였습니다 (코드 복사 가능).

 

Step 1: 먼저 pubspec.yaml에 debounce_throttle 패키지를 추가해줍니다. dio 패키지는 추가하지 않으셔도 무방합니다.

 

 

Step 2: 아래와 같이 변수들을 선언합니다. _debouncer 변수를 선언하여 측정 기준 기간, 초기값, 동일한 값을 체크할 것인지 여부를 미리 넣어줍니다.

 

 

Step 3: initState와 dispose 메소드를 재정의해줍니다. 여기에서 리스너를 달아줍니다. 아래 step 4에서 _validateEmail 함수를 사용할 것입니다.

 

 

Step 4: 이메일을 검증하는 함수를 추가합니다. 간단한 예시기 때문에 이렇게만 이메일 형식이 올바른지 정규식만 사용하여 구현했지만 추후에는 이 메소드를 활용해서 debounce의 장점을 더욱 확인해볼 수 있도록 이메일이 중복되는 지 여부를 파악하는 API를 호출하는 등 여러 로직을 추가해볼 수 있습니다. 

 

 

Step 5: Widget build 부분을 아래와 같이 구성해주시면 됩니다. 72~74번째 줄에 보시면, TextField의 onChanged를 통해 텍스트가 변경될 때마다 함수를 호출하도록 되어 있습니다. 이 때, debounce를 사용하여 1초의 간격을 두고, 매초 제일 마지막에 호출된 것을 기준으로 호출이 됩니다. _debouncer.setValue(val)에서 val이 바로 41번째 줄의 listen((str) => _validateEmail(str)로 전달되어 _validateEmail 함수에서 str의 이메일 내용을 전달 받게 됩니다. 

 

 

Step 6: 실행해본 모습입니다. 1초 동안 여러 번 타이핑하여도 맨 마지막에 입력된 것만 호출되어 실행됩니다.

 

 

References:

https://pub.dev/packages/debounce_throttle

debounce_throttle | Dart package

 

 

 

[전체 소스 코드]

 

[유튜브 강좌 영상]

 

https://youtu.be/4SK0q_neKS4?si=qbfIinLTeQrj6E4z