[Flutter] 사용자의 ‘마지막 입력’을 기다리는 기술, Flutter 디바운싱

서연·2025년 10월 16일
post-thumbnail

📖 Debouncing

  • 사용자가 연속적으로 발생시키는 이벤트 중 마지막 이벤트만 처리하도록 하는 기법이다.
  • 주로 검색창 입력, 자동완성, 실시간 유효성 검사, 스크롤 이벤트 처리 등에 사용된다.

🧠 개념 이해

  • 사용자가 빠르게 여러 번 입력하거나 클릭해도 마지막 동작이 발생한 후 일정 시간이 지나야 실행된다.
  • 이렇게 하면 불필요한 API 요청이나 연산을 줄일 수 있다.

🧩 예시 시나리오

  • 예를 들어 사용자가 검색창에 Flutter라고 입력한다고 하면 키를 누를 때마다 API 요청을 보낸다면 서버에 과부하가 생긴다.
  • 하지만 Debouncing을 적용하면 타이핑이 멈춘 후 정해진 시간이 지나야 한 번만 API 요청을 보낸다.
  • 즉 사용자가 입력을 멈췄을 때만 실제 요청이 발생한다.

⚙️ 구현 방법

  • Timer 변수를 선언한다.
  • onChanged 이벤트가 발생할 때마다 기존 타이머가 있으면 cancel()로 취소 새로운 타이머를 시작한다.
  • 타이머가 끝나는 시점에 실제 함수를 실행한다.
  • dispose() 시 타이머를 함께 취소해 메모리 누수를 방지한다.

🚀 Debouncing의 장점

  • 불필요한 API 호출이 감소된다.
  • 네트워크 트래픽이 절약된다.
  • 앱 성능이 향상된다.
  • 서버 부하가 감소된다.

0개의 댓글