책 검색에 무한스크롤 사용하기

독서록 앱에는 책 검색 기능을 사용하고 있는데 검색을 할때 바로 원하는 책을 찾을 수 없을 수도 있습니다.. 그렇지만 한번에 많은 양의 정보를 요청하면 앱의 속도가 느려질 수 있으니 적은 수를 원할때마다 요청 하면서 속도를 높이는데 이때 사용할 수 있는것이 무한 스크롤입니다.

1. api 분석

API요청에는 무한 스크롤처럼 데이터의 중간부분만 요청 할 수 있게 설정할 수 있는 파라미터가 있는 경우가 있습니다. 없다면 구현이 불가능 할 수 있으니 가장 먼저 확인해줍니다. 

다행히 데이터 요청의 시작지점을 설정할 수 있어서 사용할 수 있다는 것을 확인했습니다.

2. Start 파라미터 추가하기

데이터를 요청 할 때 start의 위치를 알려줘야하므로 함수 마다 start를 추가해줍니다.

3. 검색 함수를 수정한다.

  int start = 1;
  bool isFetching = false;

  bookSearch(String text, int start, {bool append = false}) async {
    if (isFetching) return; // 중복 호출 방지
    isFetching = true;
    await Future.delayed(Duration(milliseconds: 500));
    await ref
        .read(booksearchViewModel.notifier)
        .fetchNaver(text, start, append: append);

    setState(() {
      isFetching = false;
      if (append) this.start += 10; // 다음 페이지 요청을 위한 start 값 증가
    });
  }

 

4. viewmodel을 수정한다.

Future<void> fetchNaver(String query, int start, {bool append = false}) async {
    try {
      final results = await ref.read(fetchNaverUsecaseProvider).execute(query, start);

      // 기존 데이터 유지 + 새로운 데이터 추가
      if (append) {
        state = AsyncData([...?state.value, ...results!]);
      } else {
        state = AsyncData(results!); // 첫 검색 시 초기화
      }
    } catch (e, stack) {
      state = AsyncError(e, stack);
    }
  }

 

 

3,4에서 start를 추가만하면 데이터의 시작위치만 바뀌고 기존의 데이터에 데이터가 추가되어서 보여지지지 않았다. 그래서 append를 추가해서 처음 검색하면 appned를 false로 해서 현재 데이터를 초기화하고 start가 0에서 시작하는 데이터를 받고, append가 true가 되면 현재 데이터를 유지하고 새로운 데이터를 추가 할 수 있게 해주었다.

 

5. 무한스크롤 설정

NotificationListener<ScrollNotification>(
              onNotification: (notification) {
                if (notification is ScrollUpdateNotification &&
                    notification.metrics.pixels >=
                        notification.metrics.maxScrollExtent) {
                  bookSearch(textEditingController.text, start, append: true);
                }
                return false;
              },

당연하게도 무한스크롤을 이용하기 위해서 필요한 notificationListener를 이용해서 아래로 스크롤할때 위치를 추적하고 맨아래가 되었을때 작동하도록 해주었다.

 

이렇게 처음 무한스크롤을 구현해보았다. 무한 스크롤이 처음에는 어려운거같은데 해보면 막상 어렵지 않다는것을 알 수 있었습니다. 추가적으로 UI적으로 약간 부자연스러움이 느껴져서 추후에 수정할 것입니다.