Rx 없이 View ➡️ ViewModel Binding하기

Rx라는 놈 공부할 땐 어려웠는데.. 한 번 써보니까 없이 기능 구현을 할 때 갈증이 계속해서 일어나는 현상을 겪고 있습니다.

하지만 라이브러리에 의존하는 것은 좋지 않으니까 Rx 없이 데이터 바인딩을 하는 방법을 공부해보았습니다.

코드의 경우 검색해본 거의 모든 게시물에서 동일한 형태로 사용되고 있었습니다. 내부적인 동작 과정도 모른채로 가져다쓰긴 싫어서 공부 겸 작성한 게시물입니다!

체크 리스트 앱을 만든다고 가정합시다. 할 일을 완료할 때마다 그 날 일의 완료율 Label을 계속해서 바꿔주고 싶어요. 딱 Rx를 사용하면 편리한 상황이지만 다른 기능을 찾아봅시다.

값이 바뀔 때마다 수행하는 동작.. 정확히 해당 기능을 하는 친구가 있었던 것 같아요.

바로 didSet입니다.

didSet

var donePercentage: Int = 0 {
  didSet {
    print(oldValue)
  }
}

donePercentage의 값이 바뀔 때마다 didSet에 있는 print 함수가 자동으로 호출됩니다. 이 didSet을 키워드로 잡고 시작해보겠습니다.

Observable

Rx에서 우리는

viewModel.todos
  .subscribe(onNext: { todo in
    print(todo.count)
  })
  .disposed(by: self.disposeBag)

이런 식으로 Observable한 데이터를 만들어주고 subscribe하여 필요한 동작들을 처리해주었습니다.

먼저 필요한 Observable 타입을 차근차근 만들어봅시다.

value: T

class Observable<T> {
  var value: T

  init(_ value: T) {
    self.value = value
  }
}

Observable은 모든 타입에 대해서 관찰이 가능해야하기 때문에 Generic 타입을 T라는 이름으로 사용해주었습니다. 그리고 생성자를 통해 알맹이인 value 값을 넣어주었죠.

이 value 값이 바뀔 때마다 어떤 함수를 실행해주어야 하기 때문에 didSet을 사용해줍시다.

var value: T {
  didSet {
    // 실행할 함수
  }
}

listener (클로저)

다시 Rx의 경우를 봐볼까요?

저 didSet 안에 들어가게 될 함수를 찾아봅시다.

.subscribe(onNext: { todo in
  print(todo)
})

subscribe라는 함수를 호출하고 클로저의 형태로 함수를 전달받아 실행하는 것 같네요.

그렇다면 안에 들어갈 함수를 담을 클로저 변수를 정의해줍시다.

var listener: ((T) -> Void)?

return 받는 값은 없으니 Void로 주고 value 값을 받아 처리해주어야 하니 input 파라미터로 T(제너릭 타입)을 받아줍시다.

이제 이 listener 클로저를 Observable 코드에 적용시켜줍시다.

class Observable<T> {
  var value: T {
    didSet {
      self.listener?(value)
    }
  }

  var listener: ((T) -> Void)?

  init(_ value: T) {
    self.value = value
  }
}

View쪽에서 subscribe 안에서 클로저로 받는 함수를 listener에 담고 있다가 didSet이 호출되면 실행되야합니다.

따라서 파라미터로 @escaping 클로저를 받아주고 클래스 내부의 listener에 담아줍시다.

func subscribe(listener: @escaping (T) -> Void) {
  listener(value)
  self.listener = listener
}

이 때 listener(value)와 같이 한 번 실행해줬기 때문에, subscribe와 동시에 무조건 한 번은 실행됩니다.

binding과 동시에 실행을 하지 않고 싶은 경우에는 빼주어도 아무 문제 없습니다.

종합

이제 코드들을 합쳐봅시다!

class Observable<T> {
  var value: T {
    didSet {
      self.listener?(value)
    }
  }

  var listener: ((T) -> Void)?

  init(_ value: T) {
    self.value = value
  }

  func subscribe(listener: @escaping (T) -> Void) {
    listener(value)
    self.listener = listener
  }
}

사용

class HomeViewModel {
  var todoData: Observable<[ToDo]> = Observable([])
}

class HomeViewController: UIViewController {
  private var viewModel = HomeViewModel()

  lazy var progressLabel = UILabel().then { ... }

  override func viewDidLoad() {
    self.viewDidLoad()
    self.viewModel.todoData.subscribe { todo in
      DispatchQueue.main.async {
        self.progressLabel.text = todo.count
      }
    }

    DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
      self.viewModel.todoData.value = [
        ToDo(title: "Test", state: .completed)
      ]
    }
  }
}