[Flutter] - API 호출 최적화 Debounce

 

Debounce란?

Flutter 개발을 하다 보면 사용자의 입력을 실시간으로 반영해야 하는 경우가 많습니다. 그러나 입력할 때마다 즉각적으로 API 요청을 보낸다면, 서버 부하가 커지고 불필요한 요청이 많아질 수 있습니다. 이럴 때 유용한 기법이 바로 Debounce입니다.

Debounce는 짧은 시간 내에 발생한 여러 번의 이벤트를 하나의 이벤트로 묶어 처리하는 기법입니다. 사용자의 입력이 끝난 후 일정 시간이 지나야 실행되므로 불필요한 API 호출을 줄일 수 있습니다.

---

Debounce의 필요성

• 실시간 검색 기능

검색 입력창에 사용자가 키를 입력할 때마다 API 요청을 보내면, 한 단어를 입력하는 동안에도 여러 번의 네트워크 요청이 발생할 수 있습니다. 이는 서버 부하를 증가시키고, 사용자 경험을 저하시킵니다. Debounce를 적용하면 사용자가 일정 시간 동안 추가 입력을 하지 않을 때만 API 요청을 보내므로 성능이 최적화됩니다.

• 버튼 중복 클릭 방지

사용자가 버튼을 빠르게 여러 번 클릭하면 중복 요청이 발생할 수 있습니다. 이를 방지하려면 버튼 클릭 이벤트를 일정 시간 동안 무시하는 Debounce 기법이 유용합니다.

---

구현 방법

• Timer Debounce

import 'dart:async';
import 'package:flutter/material.dart';

class DebounceExample extends StatefulWidget {
  @override
  _DebounceExampleState createState() => _DebounceExampleState();
}

class _DebounceExampleState extends State<DebounceExample> {
  TextEditingController _controller = TextEditingController();
  Timer? _debounce;

  void _onSearchChanged(String query) {
    if (_debounce?.isActive ?? false) _debounce?.cancel();
    _debounce = Timer(Duration(milliseconds: 500), () {
      print("API 요청: $query");
    });
  }

  @override
  void dispose() {
    _debounce?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Debounce Example")),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: TextField(
          controller: _controller,
          onChanged: _onSearchChanged,
          decoration: InputDecoration(labelText: "Search"),
        ),
      ),
    );
  }
}

 

• 버튼 중복 클릭 방지 - Debounce

class DebouncedButton extends StatefulWidget {
  @override
  _DebouncedButtonState createState() => _DebouncedButtonState();
}

class _DebouncedButtonState extends State<DebouncedButton> {
  Timer? _debounce;

  void _onButtonClick() {
    if (_debounce?.isActive ?? false) return;
    _debounce = Timer(Duration(seconds: 1), () {});
    print("버튼 클릭됨");
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _onButtonClick,
      child: Text("클릭"),
    );
  }
}

 

---

적절한 Debounce를 적용하면 성능을 최적화하고, 부하를 줄이며, 사용자 경험을 개선할 수 있습니다. 프로젝트에서 필요할 때 적절히 활용해 보세요!