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

🎯 RxSwift 이해하기_05

RxSwift 이해하기_01 - https://jayb-log.tistory.com/275

RxSwift 이해하기_02 - https://jayb-log.tistory.com/276

RxSwift 이해하기_03 - https://jayb-log.tistory.com/277

RxSwift 이해하기_04 - https://jayb-log.tistory.com/278

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

  
  

• 이 글에서는 Main Thread, Concurrency Thread에서 작업하기 위한 기능들에 대해 이야기해볼게요 ☺️

  
  

• 이 글에서 쓰레드에 대한 설명을 하지는 않을게요! 혹시 두 쓰레드의 차이에 대해 설명하기 어려우시다면 쓰레드에 대한 학습을 선행하시는 걸 추천드려요 :]

🧑🏻‍💻 observeOn

• 앞서 살펴봤었던 예제를 다시 한 번 볼게요.

  
  

  @IBAction func exMap3() {
          Observable.just("800x600")
              .map { $0.replacingOccurrences(of: "x", with: "/") }
              .map { "https://picsum.photos/\($0)/?random" }
              .map { URL(string: $0) }
              .filter { $0 != nil }
              .map { $0! }
              .map { try Data(contentsOf: $0) }
              .map { UIImage(data: $0) }
              .subscribe(onNext: { image in
                  self.imageView.image = image
              })
              .disposed(by: disposeBag)
      }

  
  

  위의 코드는 Main Thread에서 동작하게되요. 모든 작업들이 Main에서 작업되기 때문에 Concurrency Thread로 옮겨줘야 해요. 이렇게 쓰레드를 이동시킬 때 observeOn을 사용해요.

  
  

  @IBAction func exMap3() {
          Observable.just("800x600")
                        .observeOn(ConcurrentDispatchQueueScheduler(qos: .default)) // 쓰레드 이동
              .map { $0.replacingOccurrences(of: "x", with: "/") }
              .map { "https://picsum.photos/\($0)/?random" }
              .map { URL(string: $0) }
              .filter { $0 != nil }
              .map { $0! }
              .map { try Data(contentsOf: $0) }
              .map { UIImage(data: $0) }
              .subscribe(onNext: { image in
                  self.imageView.image = image
              })
              .disposed(by: disposeBag)
      }

  
  

  하지만 위 처럼만 작성하면 이미지를 Setting하는 작업은 Main Thread에서 이뤄져야 하기 때문에 추가적인 작업이 필요해요.

  
  

  @IBAction func exMap3() {
          Observable.just("800x600")
                      .observeOn(ConcurrentDispatchQueueScheduler(qos: .default)) // 쓰레드 이동
              .map { $0.replacingOccurrences(of: "x", with: "/") }
              .map { "https://picsum.photos/\($0)/?random" }
              .map { URL(string: $0) }
              .filter { $0 != nil }
              .map { $0! }
              .map { try Data(contentsOf: $0) }
              .map { UIImage(data: $0) }
                        .observeOn()
                        .observeOn(MainScheduler.instance) // 이미지 세팅 직전 쓰레드 재이동
              .subscribe(onNext: { image in
                  self.imageView.image = image
              })
              .disposed(by: disposeBag)
      }

  
  

  observeOn이 걸려있는 다음 줄부터의 Stream들은 모두 observeOn에 걸려있는 쓰레드에서 동작하게 되요. 즉, observeOn의 위치를 조정하여 특정 작업만 concurrent하게 진행할 수 있게 되죠. 만약 위의 작업을 조금 변경해서

  
  

  @IBAction func exMap3() {
          Observable.just("800x600")
              .map { $0.replacingOccurrences(of: "x", with: "/") }
              .map { "https://picsum.photos/\($0)/?random" }
              .map { URL(string: $0) }
              .filter { $0 != nil }
              .map { $0! }
              .map { try Data(contentsOf: $0) }
                        .observeOn(ConcurrentDispatchQueueScheduler(qos: .default)) // 쓰레드 이동
              .map { UIImage(data: $0) }
                        .observeOn()
                        .observeOn(MainScheduler.instance) // 이미지 세팅 직전 쓰레드 재이동
              .subscribe(onNext: { image in
                  self.imageView.image = image
              })
              .disposed(by: disposeBag)
      }

  
  

  이렇게 배치할 경우 데이터를 받아오는 동안 앱이 멈추게 될거에요. Data를 가져오는데 시간이 많이 걸리기 때문에 이것을 Main Thread에서 진행할 경우 딜레이가 느껴지게 되는 것이죠.

  
  

🧑🏻‍💻 subscribeOn

• observeOn의 경우 observeOn이 정의된 그 다음 줄부터 영향을 끼치게 된다고 했었죠! subscribeOn은 이와 다르게 이름 그대로 subscribe가 되는 시점 부터를 의미해요.

  
  

  @IBAction func exMap3() {
          Observable.just("800x600")
              .map { $0.replacingOccurrences(of: "x", with: "/") }
              .map { "https://picsum.photos/\($0)/?random" }
              .map { URL(string: $0) }
              .filter { $0 != nil }
              .map { $0! }
              .map { try Data(contentsOf: $0) }
                        .subscribeOn(ConcurrentDispatchQueueScheduler(qos: .default)) // 쓰레드 이동
              .map { UIImage(data: $0) }
                        .observeOn()
                        .observeOn(MainScheduler.instance) // 이미지 세팅 직전 쓰레드 재이동
              .subscribe(onNext: { image in
                  self.imageView.image = image
              })
              .disposed(by: disposeBag)
      }

  
  

  즉, subscribe가 시작되는 시점부터 Concurrent하게 작업을 진행할거야! 라는 뜻이 됩니다. 당연히 subscribeOn의 위치는 중요하지 않겠죠? 어디에 위치하더라도 시작 시점이 subscribe가 되니까요 :]

  위의 코드를 보면, subscribe 코드가 실행 될 때 Observable부터 쭉 Stream이 진행되게 됩니다.

  Scheduler는 이것만 알아도 충분해요! OperationQueue나 GCD를 커스텀해서 사용할게 아니라면

  
  

  Main Thread -> MainScheduler.instance

  Concurrency Thread -> ConcurrentDispatchQueueScheduler(qos: .default)

  
  

  를 잘 활용하도록 해요!

  
  

🙊 Side Effect

• 예시코드를 또 다시 볼게요!

  
  

  @IBAction func exMap3() {
          Observable.just("800x600")
              .map { $0.replacingOccurrences(of: "x", with: "/") }
              .map { "https://picsum.photos/\($0)/?random" }
              .map { URL(string: $0) }
              .filter { $0 != nil }
              .map { $0! }
              .map { try Data(contentsOf: $0) }
              .map { UIImage(data: $0) }
              .subscribe(onNext: { image in
                  self.imageView.image = image
              })
              .disposed(by: disposeBag)
      }

  
  

  여기서 map 등의 stream은 메소드 내부적으로만 동작하기 때문에 주변에 영향을 끼치지 않지만 subscribe의 경우 메소드 외부의 프로퍼티에 영향을 미치고 있어요.

  image를 받아서 프로퍼티에 할당하는 구조니까요.

  즉, 메소드 외부에 영향을 미치고 있다고 할 수 있고 이런 것을 side effect가 있다고 해요.

  이렇게 side effect를 허용해주는 곳은 2군데가 있어요.

  방금 본 subscribe, 그리고 do가 있어요.

  
  

  do는 subscribe와 다르게 stream이 지나가는 동안 그냥 작업을 한 번 해주는 거에요.

  결론적으로 외부에 영향을 끼치는 side effect를 처리해야한다 -> do나 subscribe에서 해주면 되요!

• 이번 글은 여기서 마무리 할게요!

ReactiveX

RxSwift by 곰튀김