mvvm 부시기 🫡

해야할 일

이제, 구현해 놓은 뷰모델을 활용해 바인딩을 진행해보겠다.

viewController에서 진행해줘야하는 일은 다음과 같이 요약할 수 있다.
1. 뷰모델에서 만들어놓은 fetch 함수를 실행시키기
2. fetch 결과 값이 바뀔때 마다 테이블뷰에 적용되게끔 bind해주기

코드1 : 뷰모델의 fetch 실행

우선 처음 실행이 되었을때, 초기값으로 검색 결과를 먼저 보여주게끔 하였다.
뷰모델의 fetchData함수의 파라미터 값을 myQuery로 설정해주었다.

private func setupData() {
    shoppingTVVM.fetchData(myQuery)
}

이렇게 선언한 setupData 함수를 viewDidLoad에 호출을 하여, 설정해둔 초기값으로 검색결과가 보여지게끔 구현하였다.

코드2 : bind함수 구현

이제, fetch 결과 값 즉 검색한 내용이 달라졌을 때 마다 이를 테이블뷰에 반영을 해 줘야 한다.
따라서 테이블뷰와 뷰모델의 bind를 통해 이를 해결해였다.

테이블뷰의 코드중 일부 이다.

 func bind(_ viewModel : ShoppingTableViewModel) {
     viewModel.storage.bind { [weak self] _ in
         guard let self = self else { return }
         DispatchQueue.main.async {
             self.reloadData()
             viewModel.realodFinish()
         }
     }
 }

이렇게 작성을 하게 되면, 값이 바뀔때마다 reloadData가 호출이 되고, 바뀐 데이터가 테이블뷰에 반영이 된다.

코드3 : bind함수 호출

다시 viewController로 돌아와, bind함수를 호출해 주면 된다.

func bind(_ viewModel : ShoppingTableViewModel) {
    shoppingTV.bind(viewModel)
    shoppingTV.backGroundViewbind(viewModel)
}

코드4 : 태그가 변경될때 마다 fetch 호출

실행 영상을 보면 내가 만든앱을 태그를 선택할 때 마다, 검색이 된다.
이를 구현하기 위해 콜렉션뷰의 셀이 선택될때 마다 fetch함수를 호출하였다.

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    collectionView.selectItem(at: indexPath, animated: true, scrollPosition: .centeredHorizontally)
    let query = tagCVVM.getSearchQueryFromTag(index: indexPath.row)
    self.myQuery = query
    shoppingTVVM.fetchData(query)
    shoppingTV.setContentOffset(.zero, animated: true)
}

우선, fetch함수 호출시 쿼리값을 알기 위해, 콜렉션뷰 뷰모델에서 getSearchQueryFromTag 함수를 구현하였다.

func getSearchQueryFromTag(index : Int) -> String {
    return tagQueryArr[index]
}

이 함수는 index값에 맞는 string값을 반환해주는 함수이다.
이 함수를 통해 return된 값을 shoppingTVVM.fetchData 의 파라미터로 넣어주면, 해당 return값에 맞는 검색결과를 얻을 수 있다.

실행영상

실행영상이다.

• 무한 스크롤 기능을 확인할 수 있다.
  
• Tag(cell)를 선택할 때마다, 달라진 검색결과를 확인할 수 있다. (바인딩)
  

회고

MVVM 으로 개발을 하면, 개인적으로 로직이 나뉘어지기 때문에 코드 유지보수에 상당히 편리하다는 느낌을 받는다.
또한 view와 model이 독립적이기 때문에 테스트 코드를 작성하기가 편해졌다.
다만, mvc에서 뷰컨트롤러가 비대해졌다면, MVVM에서는 뷰모델이 비대해질 수도 있다는 단점이 있는 거 같다.