[플러터/flutter] RxList 는 substring을 쓸 수 없는 것인가!? 😤

♨️ 문제상황

만들고 있는 프로젝트 페이지 중에 글을 검색하는 페이지가 있는데, 최근 검색어를 등록, 삭제기능을 수정해야 하는 상황. 

Hive에 저장해두고 해당 아이템을 꺼내와서 obx로 상태관리를 하면서 삭제, 등록을 해야 하는데, 단어를 하나씩 추가할 때마다 배열의 뒤에 붙는 게 아니라 앞에 붙게 하거나, 뒤로 붙일 거면 reverse를 시켜서 배열이 드러나게 해줘야 하는 상황. 여기까지는 괜찮은데, 문제는 해당 인덱스를 사용해서 삭제를 해야 하는 상황이다. 배열 앞쪽으로 추가하는 방식으로 했더니 인덱스는 변하지 않는 것인지 해당 단어를 누르면 다른 단어가 사라졌다. 게다가 10개 이상은 출력시키지 말라는 조건까지 붙었다. 

 

 

 

 

 

 

해결 방안

✅ 최근검색어 업데이트 될 때 배열 앞쪽으로 보내기 ➡️  insert() method 사용하기

 list.insert(0, item);

보통 list에 더할 때 add()를 많이 쓰는데, 최근 검색어는 하나씩 늘어날 때마다 앞쪽에 붙어야한다.

그래서 add대신에 insert()라는 메소드를 쓰고, 추가할 index와 추가할 text를 넣어준다.

 

 

 

✅ RxList 갯수 제한하기 ➡️ removeLast() method 사용하기

이 부분을 구현하는데 제일 많은 시간이 들어갔었다. Hive.Box에 담는 걸 구현하지 않아서 급하게 hive에 대해서 공부를 해야 했다. 타입이 어떤지, box에 저장되는 list형태를 길이제한 할 수 없는 건지 index로 길이를 자를 순 없는지 😖

 

아래의 코드가 실제로 적힌 코드이다. postSearchHistoryBox가 hive.box에서 해당 내용을 출력해오는건데, 그중에서도 keyword만 RxList 타입에 담아서 출력시킨다. 그냥 List타입이면 substring()을 사용할 수 있을 것 같았는데 RxList는 그 메소드를 적용시킬 수 없다.

RxList 타입에서 할 수 있는 방법이 없을까를 찾다가 10개 이상만 안되면 되기 때문에 길이를 감지해서 10개를 채우면 무조건 마지막 요소를 지우고 앞쪽에 새로운 단어를 추가하는 것으로 해결했다. 

 

void toList(int userId){
    historyList.clear();
    for(var item in postSearchHistoryBox.value.values.where((element) => element.userId == userId)){
      if(historyList.length == 10){
        historyList.removeLast();
      }
      historyList.insert(0, item.keyword);
      historyList;
    }
  }

하지만 그 와중에서도 removeLast()가 적용이 안되는 줄 알고 엄청 버벅거렸다. 다시 한번 느낀 거지만 이럴 땐 공식문서를 꼼꼼하게 훑어봐야 한다. 결국 답은 공식문서에서 찾았다. 구글링을 효과적으로 하지 못한 건지 답을 못 찾다가 공식문서를 하나하나 읽어서 해당 메소드를 찾았다.  removeLast()는 무조건 마지막 요소를 지워내는거고, 이 외에도 인덱스를 이용해서 지우는 것도 있고 다양하게 있다! 

 

 

 

 

 

 

 

 

 

 

 

 

 

➡️ 참고

https://pub.dev/documentation/observable_ish/latest/list_list/RxList-class.html

RxList class - list library - Dart API