Flutter에서 디바운스 검색기능 구현하기: API 호출 없이 로컬 데이터 사용하기

안녕하세요, 여러분!
Flutter로 검색 기능을 구현할 때 여러분은 어떤 어려움을 겪고 계신가요?

검색어를 입력할 때마다 리스트를 업데이트해야 해서 성능 저하와 불필요한 API 호출로 골머리를 앓고 있지는 않으신가요? 이번 글에서는 이러한 문제를 깔끔하게 해결할 수 있는 Debounce 기술에 대해 소개해드리려고 합니다!

Debounce 란?

Debounce는 사용자 입력 같은 이벤트가 빠르게 연속으로 발생할 때, 이를 제어하여 불필요한 작업을 줄이는 기술입니다.

간단히 말해 특정 시간 동안 이벤트를 모아 마지막 이벤트만 실행시키는 방식이죠. 이 기술은 검색 기능을 구현할 때 매우 유용합니다. 사용자가 타이핑을 멈출 때까지 기다린 후 검색을 실행할 수 있기 때문입니다.

Flutter에서 debounce 구현하기

여기서는 Flutter 패키지 중 하나인 easy_debounce를 활용해 검색 기능을 구현해 보겠습니다. 먼저, pubspec.yaml 파일에 easy_debounce 패키지를 추가해줘야 합니다.

dependencies:
  easy_debounce: ^2.0.3

그 후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드받습니다.

UI 코드 작성

검색창을 구성하는 간단한 UI를 작성해보겠습니다.

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

class SearchScreen extends StatelessWidget {
  final viewModel;

  const SearchScreen({Key? key, required this.viewModel}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Debounce Search')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              decoration: InputDecoration(hintText: '검색어를 입력하세요'),
              onChanged: (value) {
                EasyDebounce.debounce(
                  'search-debouncer',
                  Duration(milliseconds: 400),
                  () => viewModel.onSearch(value),
                );
              },
            ),
            Expanded(
              child: ListView.builder(
                itemCount: viewModel.searchedResults.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(viewModel.searchedResults[index]),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 TextField 위젯에서 onChanged 콜백을 사용하고, 사용자가 입력할 때마다 EasyDebounce.debounce를 호출합니다.

400ms 동안 입력이 발생하지 않으면 viewModel.onSearch 메서드를 호출하여 검색을 시작하게 됩니다.

ViewModel 작성

ViewModel에서 실제 검색 로직과 데이터 핸들링을 구현해보겠습니다.

class ViewModel with ChangeNotifier {
  List<String> allData = ['apple', 'banana', 'grape', 'orange'];  // 전체 데이터 목록
  List<String> _searchedResults = [];

  List<String> get searchedResults => _searchedResults;

  void onSearch(String query) {
    final results = allData.where((item) => item.contains(query)).toList();
    _searchedResults
      ..clear()
      ..addAll(results);
    notifyListeners();
  }
}

이 코드에서는 allData 리스트에 있는 데이터를 기준으로 검색을 수행합니다. query를 포함하는 아이템들만 _searchedResults 리스트에 추가하고, notifyListeners()를 호출하여 UI에 변경 사항을 반영합니다.

이제 사용자가 검색어를 입력할 때마다 실시간으로 (하지만 debounce를 통해 효율적으로) 검색 결과를 확인할 수 있습니다. Debounce 기술은 사용자의 경험을 개선할 뿐만 아니라 성능 최적화에도 큰 도움을 줍니다.

여러분도 이 방법을 통해 프로젝트에 검색 기능을 추가해 보세요! 😊

🔥 해당 포스팅은 Dev.POST 도움을 받아 작성되었습니다.