[iOS] - RxSwift 개념 이해하기_01

🎯 RxSwift 이해하기_01

• 🙋 이 글은 RxSwift에 대한 엄청난 이해나 본질을 파악한다기보다 입문하는 입장에서 작성하는 글이에요! 곰튀김님의 강의(하단에 링크) 를 들으며 정리한 내용, 생각들을 작성할 예정이에요. 틀린 부분이나 추가하면 좋은 부분에 대한 피드백은 언제나 환영입니다 :]

• 저작자에 대한 표시와 링크가 있지만 혹시나 문제가 될 경우 바로 삭제하도록 하겠습니다.

  Git Contributors에 반가운 이름이..

  

🧑🏻‍💻 What - RxSwift란?

• RxSwift를 이해하기 위해서는 우선 Rx가 무엇인지 이해할 필요가 있어요. ReactiveX 공식 홈페이지를 들어가보면 첫 화면에 아래와 같은 설명이 나와요!

  An API for asynchronous programming with observable streams

  
  

  해석해보면, Rx란 observable streams를 활용한 비동기 프로그래밍을 위한 API 에요. RxSwift는 당연히 이 Rx를 활용하는 Swift이겠죠? 그럼 이제부터 저 한 문장을 이해하기 위한 글을 시작합니다!

  
  

⚙️ 비동기 프로그래밍이란?

• 글의 목적이 비동기 프로그램을 설명하는 것은 아니다보니 자세한 설명은 어려울 것 같지만 리마인드 수준으로 적어보려고 해요. 비동기 프로그래밍은 동기 프로그래밍의 반대 개념이에요! 동기 프로그래밍은 한번에 하나의 작업만 하는 개념이니까, 비동기는 어떤 한 작업이 진행될 때 다른 작업도 동시에 할 수 있는 개념이겠죠?

  
  

• 예를 들면, 숫자를 올려주는 작업이 진행되고 있는 상황에서 이미지를 다운 받아야 하는 상황이에요. 동기적으로 작업을 처리하면 숫자를 올려주다가 이미지를 받는 작업을 하게 되면 숫자를 올려주는 작업은 멈추게 되요. 아래는 그 동기적 작업의 예시에요. 반대로 비동기적이라면 이미지를 다운 받는 여부와 상관없이 숫자는 계속 올라갈 거에요.

  

  
  

• 이런 비동기 작업을 처리하기 위한 도구들로 PromiseKit, Bolts가 있어요. PromiseKit은 가장 유명한데 이 Promise라는 방식이 JavaScript에서 널리 사용되고 있기 때문이라고 해요! 이 부분에 대한 글은 추후에 언젠가.. 써볼게요!

  
  

📚 Why - RxSwift는 왜 사용하나요?

• 위에 PromiseKit, Bolts역시 마찬가지라고 생각해요. 결국 "비동기 프로그래밍"을 어떻게하면 더 쉽게 할 수 있을까 가 포인트여서 Async하게 처리되야하는 작업이 있을 때 조금 더 간결하게 코드를 작성할 수 있게 해주는 도구로서 RxSwift를 사용해요.

  
  

• 그럼 왜 PromiseKit이나 Bolts를 사용하지 않고 굳이 RxSwift를 사용하나?라는 의문이 자연스럽게 생길거에요(나만..?). RxSwift에는 무언가 한 개가 더 있는데 그게 Operators에요. 자세한 설명은 이후 이어져요! 다만, 여기서는 "RxSwift는 비동기 프로그래밍의 간결화를 위해서, 그리고 그 중에서도 다른 Kit과 다른 기능이 있다" 정도로 정리하면 좋을 것 같아요.

🛠 How - RxSwift 처음 사용해보기

• 모든 예제코드는 곰튀김님의 github이 출처에요!

• RxSwift의 코드를 먼저 살펴볼게요

  @IBAction func onLoadImage(_ sender: Any) {
          imageView.image = nil
  
          _ = rxswiftLoadImage(from: LARGER_IMAGE_URL)
              .observeOn(MainScheduler.instance)
              .subscribe({ result in
                  switch result {
                  case let .next(image):
                      self.imageView.image = image
  
                  case let .error(err):
                      print(err.localizedDescription)
  
                  case .completed:
                      break
                  }
              })
      }
  
  // MARK: - RxSwift
  func rxswiftLoadImage(from imageUrl: String) -> Observable<UIImage?> {
          return Observable.create { seal in
              asyncLoadImage(from: imageUrl) { image in
                  seal.onNext(image)
                  seal.onCompleted()
              }
              return Disposables.create()
          }
      }

  
  

  위의 코드는 아까 예시에서 이미지를 다운 받기 위해 "동기" 버튼을 클릭하는 경우의 로직이에요. 여기서 rxswiftLoadImage 메소드는 Observable을 반환해요. 그리고 onLoadImage에서 이 observable을 subscribe하는데 이 경우 disposable이 반환되요. 여기서 disposable이란 쉽게 버릴 수 있다는 뜻이에요! (TMI: dis(off) + pos)

  그럼 이 다운로드 작업을 취소하는 기능을 만들어볼게요! 이름은 onCancel로 할게요.

  이 onCancel에서 취소를 하려면 뭘 취소하려는지 알아야겠죠? 그래서 이 ViewController가 위의 disposable을 알게 하기 위해 프로퍼티를 생성해주고 그 프로퍼티에 disposable 결과물을 넣게 할거에요.

  
  

  var disposable: Disposable?
  
  @IBAction func onLoadImage(_ sender: Any) {
          imageView.image = nil
          self.disposable = rxswiftLoadImage(from: LARGER_IMAGE_URL)
                ...
  
  @IBAction func onCancel(_ sender: Any) {
          self.disposable?.dispose()
      }

  
  

  onLoadImage에서 생긴 disposable을 프로퍼티로 VC가 갖고, onCancel에서 VC가 disposable을 가지고 있다면(버릴게 있다면) 버리는 구조로 작성할 수 있어요. 그러면 아래와 같이 잘 작동해요.

  
  

  

  
  

• 이번엔 dispose bag이라는 개념을 사용해볼게요. 바로 위에서 했던 작업처럼 무언가를 버리고 싶은데 Disposable 한 개씩 프로퍼티에 저장해서 버리는게 아니라 Disposable을 담아두는 가방의 개념이에요! 적절한 네이밍의 예시 같네요 :]

  위의 코드를 살짝 바꿔볼게요. 우선 프로퍼티 disposable을 disposeBag으로 변경해주고, disposable을 만들 때 가방에 담아둘거에요.

  
  

   @IBAction func onLoadImage(_ sender: Any) {
          imageView.image = nil
                  // 변경
          let disposable = rxswiftLoadImage(from: LARGER_IMAGE_URL)
                 ...
                     })
          disposeBag.insert(disposable)
  
  @IBAction func onCancel(_ sender: Any) {
          self.disposable?.dispose() // 에러 발생
      }

  
  

  이렇게 하고 끝이면 편하겠지만.. disposable과 다르게 dispose bag은 dispose()라는 메소드가 없어요. 그래서 dispose bag을 비워주는 건 새로운 인스턴스를 생성하는 방식으로 해야되요.

  
  

  @IBAction func onCancel(_ sender: Any) {
          self.disposeBag = DisposeBag()
      }

  
  

  여기서 한단계 더 나아가서, disposable을 담을 때 상수에 담아서 insert하는게 아니라 바로 disposed라는 메소드를 사용할 수 있어요.

  
  

  @IBAction func onLoadImage(_ sender: Any) {
          imageView.image = nil
  
          rxswiftLoadImage(from: LARGER_IMAGE_URL)
              .observeOn(MainScheduler.instance)
              .subscribe({ result in
                                  ...
                  }
              }).disposed(by: self.disposeBag)
      }

  
  

  개인적으로는 첫번째 방법이 더 직관적이지만 아래 방법이 더 간결한 것 같아요.

  2편 - https://jayb-log.tistory.com/276 에서는 Operators 이야기로 넘어가볼게요!

ReactiveX

RxSwift by 곰튀김