[곰튀김님] RxSwift + MVVM 정리

[곰튀김님] RxSwift + MVVM 정리

https://www.youtube.com/watch?v=iHKBNYMWd5I&list=PL03rJBlpwTaBrhux_C8RmtWDI_kZSLvdQ

1교시

JSON 다운로드 작업이 동기적으로 구현이 되어 있다.

LOAD 클릭 시 타이머를 포함해 화면 전체가 멈추고, 다운로드가 끝나면 다시 화면이 움직인다.

비동기로 만들어보자.

비동기란?

: 현재 스레드에서 작업을 진행하면서, 다른 스레드를 이용해 다른 작업을 동시에 진행하는 것.

다른 스레드에서 비동기로 처리한 작업이 완료되면, 그 결과를 받아와야 한다.

• DispatchQueue.global().async { ... }
• 이렇게 처리하면 프로그램이 죽는다.
• UI를 건드리는 부분은 global()스레드가 아닌 메인 스레드로 해야 하기 때문.
• UI관련 코드를 다시 한 번 DispatchQueue.main.async { ... }

completion handler

순수 swift로 비동기 결과값을 받아오려면 completion @escapimg 핸들러를 써야 한다 - 클로저 방식

• @escaping 클로저를 통해, 다른 스레드에서 처리된 비동기 작업 결과를 넘겨준다
• 단점 : 비동기를 여러 번 겹쳐 써야 하는 상황 발생 시 알아보기 복잡해진다(depth가 깊어진다)

그래서 비동기 결과값을 클로저가 아니라, 리턴값으로 표현하려는 시도가 생겼다.

나중에생기는데이터

• 비동기작업 결과값을 리턴값으로 나중에생기는데이터<제네릭>으로 반환
• 나중에생기는데이터<제네릭>.나중에생기면{...}에서 나중에 생기면 할 작업을 처리한다.

• class 나중에생기는데이터<T> {
      private let task: (@escaping (T) -> Void) -> Void
  
      init(task: @escaping (@escapint (T) -> Void) -> Void) {
          self.task = task
      } // 데이터 생성시 클로저를 받아 가지고 있음
  
      func 나중에오면(_ f: @escaping (T) -> Void) {
          task(f)
      } // 나중에오면 메서드 호출 시, 가지고 있던 클로저를 실행
  }

• 사용할 때는 이렇게 사용

  • // 나중에생기는데이터 만들기
    func downloadJson(_ url: String) -> 나중에생기는데이터<String?> {
        return 나중에생기는데이터() { f in
             DispatchQueue.global().async {
                 let url = URL(string: url)!
                 let data = try! Data(contentsOf: url)
                 let json = String(data: data, encoding: .utf8)
    
                 DispatchQueue.main.async {
                     f(json)
                 }
             }
        }
    }
    
    // 나중에생기는데이터 를 사용할 떄 : .나중에오면 으로 사용
    func onLoad() {
        let json: 나중에생기는데이터<String?> = downloadJson(URL)
    
        json.나중에오면 { json in
            self.editView.text = json
            // ... 
        }
    }

RxSwift

• 위와 같은 나중에생기는데이터로 비동기작업 결과값을 전달하는 유틸리티 중에 하나가 RxSwift이다.
  • 나중에생기는데이터<타입> = Observable<타입>
  • .나중에생기면 = .subscribe
• 즉 RxSwift의 용도도 "비동기결과값을 리턴값으로 주기 위해 만든 유틸리티"이다.
• Disposable
  • .dispose() : 버린다는 뜻. 동작을 취소시킴.
    • 이 메서드를 호출하면 Observable 작업이 끝나든 끝나지 않았든 즉시 작업을 취소시킨다.
• 순환참조
  • 순환참조는 왜 생기는가?
    • 클로저가 자신 내부에 선언된 self를 캡처하면서 레퍼런스 카운트가 증가하기 때문에 순환참조가 생긴다.
    • 해결1 : 클로저의 파라미터를 [weak self]로 만들고, self를 self?로 선언해 해결 가능
    • 해결2 : 클로저를 제때 없애기
      • Rx의 경우 .completed/ .error/.disposed를 호출하면 클로저가 사라진다.

RxSwift 사용방법

• 비동기로 생기는 데이터를 Observable로 감싸서 리턴하는 방법 = (return Observable<T>.create {...})

return Observable.create() { emitter in
    let url = URL(string: url)!
    let task = URLSession.shared.dataTask(with: url) { (data, _, err) in
        guard err == nil else {
            emitter.onError(err!)
            return
        }

        if let dat = data, let json = String(data: dat, encoding: .utf8) {
            emitter.onNext(json)
        }

        emitter.onConpleted()
     }                       
     task.resume()
    return Disposables.create() {
        task.cancel()
    }
}

• Observable로 오는 데이터를 받아서 처리하는 방법 = (Observable.subscribe { ... })
  • Observable의 리턴값은 Disposable

observable.subscribe { event in
    switch event {
      case .next(let data):
              break
      case .error(let err):
           break
      case .completed:
              break
    }
}

• Observable의 종료 : .completed, .error, .disposed
  • 종료 시점에 클로저가 사라지므로 순환참조를 예방할 수 있다.

Observable의 생명주기

1. create
2. subscribe (동작 시작)
3. onNext (데이터 전달)
4. onCompleted / onError (실행 종료)
5. disposed (동작이 끝난 Observable은 재사용할 수 없음 - 일회용임. 다시 subscribe해 동작을 시작해야 함)

Observable을 선언 = 실행 이 아니다. .subscribe를 할 때 실행이 된다!

SugarApi - 연산자

RxSwift의 기본기능을 축약해 주는 API. 귀찮은 작업들을 생략해 준다

연산자 : 데이터를 중간에 바꾸는 API (map, observeOn..)

연산자의 종류

reactivex.io 페이지에 들어가 operator로 검색하면 연산자 종류가 나온다.

• https://reactivex.io/documentation/operators.html
• 굵은 글씨로 된 연산자는 : 대표 기능을 하는 연산자
  • 일반 글씨로 된 연산자 : 대표 연산자의 파생 연산자
• 내가 원하는 연산자를 빨리 찾는 방법?
  • 채팅방에 물어보기(best)ㅋㅋ
  • 공식문서에서 찾아보기

자주 쓰이는 연산자

• Observable.just("데이터") : 데이터 하나 전달할 때 사용하는 연산자
• Observable.from(["hello", "world"]) : 여러 데이터를 하나씩 전달할 때 사용하는 연산자
• .subscribe(onNext: { ... } ) : next, completed, error, dispose 중 필요한 것만 파라미터로 사용 한다.
• .observeOn() : 다음 줄부터 실행할 스레드를 지정
  • downstream(아래로) 영향을 준다
  • DispatchQueue.main.async { ... }를 사용하지 않고 한 줄로 해결
  • 매개변수로는 Scheduler타입을 넣는다.
  • 예를 들어 MainScheduler.instance, ConcurrentDispatchQueueScheduler(qos: .defalut) ..
• .subscribeOn() : 맨 처음 시작할 스레드를 지정
  • 어디에서 호출하든 맨 처음 스레드를 지정함
  • upstream(위로) 영향을 준다
• .map { ... },.filter { ... } ...
• .buffer : 여러 데이터가 있을 때 지정된 갯수만큼 묶어서 내려보내줌
• .scan : 직전 데이터와 새 데이터를 가지고 연산을 수행
• .take(횟수) : 지정 횟수만큼만 수행
• Observable.debug() : Observable내에서 어떤 데이터가 전달되는지를 보여줌

마블 다이어그램 marble diagram

마블 다이어그램만 이해하면 연산자의 동작을 알 수 있다.

• 동그라미 = 데이터 를 의미함
• 네모 = 연산자 를 의미함
  • 색깔 : 쓰레드를 의미함
• 화살표 = Observable 을 의미함
• 세로줄 = complete 를 의미함

---

2교시

Stream의 분리 및 병합

• 병합
  • .merge : 여러 Observable을 묶어 하나의 Observable로 단순하게 합친 것
    • 두 Observable의 데이터타입이 같아야만 한다
  • .zip : 두 Observable의 데이터를 합쳐 쌍으로 만들어 보냄
    • 두 Observable의 길이가 같으면 쌍으로 맞게 보냄
    • 길이가 다르면 짧은 쪽의 길이에 맞춤
  • .combineLatest : .zip과 달리 데이터 쌍 갯수가 안맞아도, 이전 데이터 중 최근 것을 가지고 쌍을 만들어 준다

Disposable

• 연산을 취소하고 싶을 때, 그리고 해당 스트림을 삭제할 때 사용
• disposeBag : Disposable들을 담는 가방. 여기에 담아두면 클래스가 지워질 때 자동으로 스트림들을 지워준다.

step2 예제 (RxSwift + MVVM)

• RxSwift를 사용해 어떻게 json 데이터를 받아 -> 테이블뷰에 뿌리는지를 보여주는 예제이다.
• 참고자료로 보기

step3 예제

• step3 empty를 열어서 뷰와 연결, RxSwift 적용, RxSwift + MVVM 적용 해보기 연습을 한다.

MVVM

뷰모델 = 뷰를 위한 모델,

• 뷰에 필요한 모델이라는 뜻이다!
• 뷰에 필요한 데이터를 가지고 있다.
• 앱에 필요한 로직을 뷰모델이 갖는다.

뷰컨트롤러

• 뷰 요소가 어떻게 보여질지에 대한 동작만 지정한다.
• 로직을 처리하지는 않는다.
• 뷰모델을 갖는다 (뷰모델에 그 로직이 있다)

RxSwift 적용 지점

• 데이터가 바뀌면 내가 뷰 업데이트 메서드를 실행시키는 게 아니라, 뷰가 알아서 업데이트되었으면 좋겠다.

Subject

: Observable처럼 subscribe해 값을 받아올 수 있고, (추가적으로) 외부에서 값을 컨트롤할 수도 있는 객체.

https://reactivex.io/documentation/subject.html

• 왜 쓰는가?
  • create 시점 뿐 아니라, 이미 만들어진 subject에 대해서도 값 변경 가능
  • Observable과의 차이점 : 생성된 이후에도 외부에서 값을 바꿀 수 있다. (데이터 주입 가능)
  • PublishSubject와 BehaviorSubject를 가장 많이 사용한다.

Subject의 종류

• PublishSubject()
  • 자신을 subscribe한 객체에게 데이터를 내려줌
  • 이후 subscribe한 객체에게는 그 이후의 데이터를 내려줌
• BehaviorSubject(기본값)
  • subscribe하면 기본값을 내려줌
  • 이후 subscribe한 객체에게는 가장 최근의 데이터 + 그 이후의 데이터를 내려줌
• AsyncSubject
  • subscribe한 객체들이 있어도 데이터를 내려주지 않다가,
  • 자신이 complete되는 시점에 맨 마지막 데이터만 subscribe한 객체들에게 내려주고 끝남
• ReplaySubject
  • 새롭게 subscribe한 객체에게 그동안 발생한 모든 데이터를 내려줌

RxCocoa

: RxSwift의 요소들을 UIKit에 적용시킨 것!

UIKit요소.rx로 사용 가능

• .bind(to: 바인더) : subscribe(onNext: { ... } ) 대신 사용
  • [weak self]를 사용하지 않아도 알아서 순환참조를 예방해 준다.
  • menuObservable.bind(to: totalPrice.rx.text) : dequeue역할을 대신함
    • index = indexPath
    • item = menu 하나 (menuObservable 배열의 객체 하나)
    • cell = reusableCell하나
  • 예시 : bind(to: tableView.rx.items())

UI작업의 특징 - Driver, Relay

• UI쓰레드에서만 처리해야 함 = 메인 쓰레드
  • 항상 .observeOn(MainScheduler.instance)를 넣어줘야 함
• 스트림이 끊어지면 안 됨 - 에러가 난다고 해서 화면이 먹통이 되면 안 됨. 에러가 발생해도 그걸 알려주고 다시 정상상태로 돌아가야
  • 항상 .catchErrorJustReturn()처리가 필요함
• 위의 두 코드가 항상 들어가야 하는 게 귀찮으니까, 축약하는 새 API 등장 - Driver
• Driver : UI작업을 위한 끊어지지 않는 Observable.
  • asDriver(onErrorJustReturn:에러발생시처리할기본값)
  • .drive(UI스레드에서 할 동작) - 항상 UI스레드에서 돌아감
    • .drive(itemCountLabel.rx.text)
  • Driver에 대해서는 drive()만 하면 된다 (subscribe 필요없음)
• Relay : UI작업을 위해 끊어지지 않는 subject. (RxRelay)
  • subject와 다 똑같은데 끊어지지 않음. 오로지 .next만 존재함
  • .onNext() 대신 .accept()만 사용함

MVC, MVP, MVVM 정리

• 기획서가 나왔을 때, 서버가 완성되지 않았어도 iOS는 iOS대로 개발을 하고 있어야 한다.
• 우리가 먼저 개발한 모델(뷰 모델)과, 서버가 보내준 모델 (도메인 모델)은 보통 다르다.
  • 도메인 모델 -> 뷰 모델 Converting 작업이 필요하다.

MVC

• Model
  • UIKit에 독립적 (테스트 가능)
• View :
  • UIKit에 의존적
• Controller
  • User Input을 받는다 (IBAction)
  • View Setting을 한다
• 단점 : 컨트롤러 역할이 너무 큼 & 테스트할 수 있는 게 모델뿐임

MVP

View와 Presenter가 1:1관계

• Model
• View (UIViewController)
  • 뷰 + 뷰컨
  • 사용자 input을 받음
  • 어떤 처리를 할지는 presenter에게 물어봄 - 판단을 하지 않음
• Presenter
  • 뷰컨의 로직을 presenter로 분리
  • 뷰에 그려질 요소를 지정함
• Model과 Presenter라는 두 부분을 테스트할 수 있다.
• 단점 : 1:1관계이기 때문에 Presenter가 너무 많아짐, Presenter가 모든 걸 판단해야 함

MVVM

• Model
• View (UIViewController)
  • 뷰 + 뷰컨
  • 뷰가 뷰모델을 바라보고 있다가, 뷰모델의 바뀌면 스스로 그리도록 바인딩해둠
• ViewModel
  • Presenter와의 차이점 : ViewModel이 View에게 지시하지 않음 (화살표가 단방향임)
  • 뷰에 보여지는 데이터만 가지고 있음
• Model과 ViewModel 테스트 가능

Q. 데이터바인딩 필수인가요?

• 필수는 아니다 근데 하면 편하다
• 데이터바인딩 대신 swiftUI방식인 didSet()등을 활용할 수도 있다
• 근데 코드가 길어지니 그냥 .bind를 쓰는 것!