[iOS] MVVM Pattern 소소하게 적용

MVVM 설명은 거두절미하고 일단 적용부터 해본다 ...

* 참고로 RxSwift 안 쓰는 거*

* 공부 중이라 틀릴 수 있음*

 

개인적으로 나의 느낀 점은, MVC에서 MV는 그대로고 ViewModel만 추가하면 될 것 같다. (당연함)

 

ViewModel 파일에서는 로직 처리를 하고, 변경이 감지됨에 따라 뷰가 변경된다고 보면 될 것 같다.

위 화면에서 동네를 클릭하면, 동네를 변경할 수 있는 팝업 창이 뜨고, 동네 선택 시 팝업 창이 사라지며 상단바의 동네이름이 바뀐다.

사실 저런 간단한 기능에 뷰모델을 적용하는 것이 오히려 더 복잡해져서 권유하고 싶지는 않지만, 

공부하는 과정이니 일단 해본다. 

하면서도 자신이 없다...

 

1. Observable 파일 추가

final class Observable<T> {
    typealias Listener = (T) -> Void
    var listener: Listener?
    var value: T {
        didSet {
            listener?(value)
        }
    }
    
    init(_ value: T) {
        self.value = value
    }
    
    func bind(listener: Listener?) {
        self.listener = listener
        listener?(value)
    }
}

 

 

 

 

2. View 파일 안에서

var viewModel = ViewModel()

뷰모델 객체 생성 후,

 

viewDidLoad 함수안에 bind()함수를 호출해준다.

override func viewDidLoad() {
    super.viewDidLoad()

    if let viewModel = self.viewModel {
        bind()
    }
}

bind함수가 없어서 에러 날 것이다.

아래쪽에 bind함수를 짜준다.

 

private func bind() {
    self.viewModel.myLocation.bind { myLocation in
        print("location changed!", myLocation)
    }
}

코드 해석을 해보자면, 뷰모델에서 Observable(관찰) 가능한 myLocation이라는 변수의 값이 변경될 때마다 저렇게 출력되는 것이다.

의도대로 되나 보자.

 

3. ViewModel

class MainViewModel {
    var myLocation: Observable<String?> = Observable(nil)
    
    init() {
        
    }
    // 동네 클릭 이벤트
    func locationDidTap(_ location: String) {
        myLocation.value = location
    }
}

ViewModel의 코드는 위와 같다. 

동네 클릭 이벤트가 일어날 때마다 locationDidTap이라는 함수가 호출되고, 

그때의 myLocation의 값의 로직 처리를 안에서 해주는 것이다.

(위 경우는 너무 간단해서 오히려 없는 게 나을 정도 ... 그래도 해보자)

 

[View의 TableView Delegate 부분]

"양재동", "서교동", "돈암동" 이라고 써져있는 저 테이블뷰를 클릭 시 호출되는 함수이다. 

ViewModel 의 locationDidTap을 호출해준다.

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let idx = indexPath.item
    self.viewModel.locationDidTap(locationData[idx])
    
    tableView.deselectRow(at: indexPath, animated: true)
}

 

4. 로그 출력

굿 ~~ 

ViewModel의 데이터 변경을 View에서 알아챘다는 것이 증명되었다.

 

이제 RxSwift를 사용해 코드를 다듬어보자.