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

🎯 RxSwift 이해하기_02

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

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

​

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

🧑🏻‍💻 Operators란?

• ReactiveX에서는 Operators를 말 그대로 "연산자"라고 표현하고 있어요. 연산자 소개를 잠시 볼게요!

  
  

  ReactiveX를 지원하는 언어 별 구현체들은 다양한 연산자들을 제공하는데, 이 중에는 공통적으로 제공되는 연산자도 있지만 반대로 특정 구현체에서만 제공하는 연산자들도 존재한다. 또한, 언어별 구현체들은 이미 언어에서 제공하는 메서드의 이름과 유사한 형태로 연산자의 네이밍 컨벤션을 유지하고 있다.

  
  

  ReactiveX에서 지원하는 다양한 언어가 있고, 공통적인 메소드도 있지만 특정한 언어에서만 제공되는 메소드가 있다는 설명이에요. RxKotlin에는 없지만 RxSwift에는 있는 메소드가 있다는 뜻이겠죠?

  
  

• Operators Chain

  Optional Chaining처럼 연달아 처리하는 Chaining 작업을 Rx의 Operators에서도 할 수 있다는 말이에요.

  
  

  특정 클래스가 제공하는 여러 메서드들을 호출하여 클래스의 항목들을 변경하는 빌더 패턴과 같은 것도 존재한다. 빌더 패턴 역시 연산자 체인과 유사하게 메서드 체인을 제공한다. 하지만, 빌더 패턴의 메서드 체인과는 달리 Observable의 연산자 체인은 호출 순서에 따라 실행 결과가 달라지는 차이점이 있다.

  따라서, Observable의 연산자 체인은 원본 Observable과 독립적으로 실행될 수 없고 순서대로 실행되어야 한다. 왜냐하면, 이미 이해하고 있듯이 연산자 체인에서 먼저 실행된 연산자가 리턴한 Observable을 기반으로 다음 연산자가 동작하기 때문이다.

  
  

• 카테고리 별 연산자

  자세한 설명은 Operators 에서 볼 수 있어요. 카테고리에는 생성, 변환, 필터링 등이 있고 예를 들어 생성 카테고리에는

  
  

  • Create — 직접적인 코드 구현을 통해 옵저버 메서드를 호출하여 Observable을 생성한다
  • Defer — 옵저버가 구독하기 전까지는 Observable 생성을 지연하고 구독이 시작되면 옵저버 별로 새로운 Observable을 생성한다
  • Empty/Never/Throw — 아주 정확하고 제한된 행동을 하는 Observable을 생성한다
  • From — 다른 객체나 자료 구조를 Observable로 변환한다
  • Interval — 특정 시간별로 연속된 정수형을 배출하는 Observable을 생성한다
  • Just — 객체 하나 또는 객채집합을 Observable로 변환한다. 변환된 Observable은 원본 객체들을 발행한다
  • Range — 연속된 범위(Range)의 정수를 발행하는 Observable을 생성한다
  • Repeat — 특정 항목이나 연속된 항목들을 반복적으로 배출하는 Observable을 생성한다
  • Start — 함수의 실행 결과를 배출하는 Observable을 생성한다
  • Timer — 지정된 시간이 지나고 난 후 항목을 하나 배출하는 Observable을 생성한다

  
  

  같은 것들이 있어요.

  이 Operators 중 일부를 하나 하나 살펴보도록 할게요!

  
  

⚙️ Operators의 종류

• Just

  just 연산자의 정의는 아래와 같아요.

  
  

  Just — 객체 하나 또는 객채집합을 Observable로 변환한다. 변환된 Observable은 원본 객체들을 발행한다

  
  

  좀 더 쉽게 설명해볼게요. 아래 코드 역시 곰튀김님의 예제 코드에요.

  
  

  @IBAction func exJust1() {
          Observable.just("Hello World")
              .subscribe(onNext: { str in
                  print(str)
              })
              .disposed(by: disposeBag)
      }

  
  

  위에서 just에 "Hello World"라는 String을 넣어줬어요. just는 이 안에 무언가를 넣어주면 다음 번에 그냥 전달이 되요. just 후에 subscribe할 때에 전달 파라미터로 그냥 그 값이 내려와요. 즉 .subscribe(onNext: { str in 에서 str은 위에서 넘어온 "Hello World"겠죠?

  
  

  그럼 아래의 경우에는 어떤 결과가 나올까요?

  
  

  @IBAction func exJust2() {
          Observable.just(["Hello", "World"])
              .subscribe(onNext: { arr in
                  print(arr)
              })
              .disposed(by: disposeBag)
      }

  
  

  당연히 arr은 ["Hello", "World"]에요. 즉 just는 그 값이 단일 String이면 단일 String, Array면 Array를 그대로 전달해줘요(뭘 넣든 넣은 그대로).

  
  

• From

  From의 정의는 아래와 같아요.

  From — 다른 객체나 자료 구조를 Observable로 변환한다

  
  

  From은 먼저 예시코드를 볼게요.

  
  

  @IBAction func exFrom1() {
          Observable.from(["RxSwift", "In", "4", "Hours"])
              .subscribe(onNext: { str in
                  print(str)
              })
              .disposed(by: disposeBag)
      }

  
  

  from에 Array가 들어올 경우, 그 안에 있는 요소를 하나씩 띄어서 내려보내줘요. 위의 코드를 실행하면 결과물이

  
  

  /** 출력 결과
  RxSwift
  In
  4
  Hours
  */

  
  

  처럼 나와요. 즉 Iterable하게 str에 한개씩 담기게 되요.

  여기서 응용을 해서 만약 4가 String 형태가 아니라 Int 형태라면?

  Swift는 한 Array에 여러 타입의 값을 넣을 수 있어요. 그래서 다른 요소들과 다르게 4만 Int라면

  
  

  Observable.from(["RxSwift", "In", 4, "Hours"])
  ...

  
  

  아무 문제 없이 작동해요. 즉 from은 같은 타입만 처리하지 않아요. 다만 그렇게 되면 str이라는 네이밍은 바꿔주는게 좋겠죠? 4라는 int 값이 str이라는 이름을 가지니까요 :)

  
  

• Map

  
  

  Map — Observable이 배출한 항목에 함수를 적용한다

  
  

  Map은 사실 Swift 고차함수와 거의 같은 개념으로 느껴져서 굳이 Rx의 Operators로 설명하긴 그렇지만, 있다는 사실을 아는 것도 중요하니까요!

  
  

  @IBAction func exMap1() {
          Observable.just("Hello")
              .map { str in "\(str) RxSwift" }
              .subscribe(onNext: { str in
                  print(str)
              })
              .disposed(by: disposeBag)
      }

  
  

  이제는 조금 익숙해진 코드를 이해해보면, just를 통해 "Hello"를 넘겨주고 이번에는 subscribe가 아닌 map에서 이 "Hello"를 받겠죠? 그리고 mapping을 하는데 여기서 str이 "Hello"니까 결과는 "Hello RxSwift" 가 될거에요. 그 후 subscribe하면 str은 just에서 넘어온 "Hello"가 아니라 "Hello RxSwift" 가 되요.

  한번 더 볼게요!

  
  

  @IBAction func exMap2() {
          Observable.from(["with", "곰튀김"])
              .map { $0.count }
              .subscribe(onNext: { str in
                  print(str)
              })
              .disposed(by: disposeBag)
      }

  
  

  이 코드의 경우 from이니까 element를 한개씩 넘겨주고, 이번에는 변수로 받는게 아니라 바로 $0으로 받았네요!

  그럼 각 글씨의 글자수를 반환하겠죠?

  mapping에서 글자 수를 반환하고 subscribe에서 그걸 출력해주니까 4, 3이 반환될거에요.

  count 메소드의 결과물이 Int라 사실 여기서는 subscribe시에 str이 아니라 int로 명명되는게 조금 더 좋은 네이밍 같아요(물론 실제 상황이면 타입 이름보다 다른 걸 사용하겠지만😊).

  
  

• Filter

  
  

  Filter — 테스트 조건을 만족하는 항목들만 배출한다

  
  

  filter도 위의 map과 마찬가지로 고차함수와 차이가 별로 없기 때문에 이해하기 쉬웠어요! 말 그대로 필터링을 통해 어떤 조건을 만족하는 값들만 반환해주는거죠.

  
  

  @IBAction func exFilter() {
          Observable.from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
              .filter { $0 % 2 == 0 }
              .subscribe(onNext: { n in
                  print(n)
              })
              .disposed(by: disposeBag)
      }

  
  

  1부터 10까지 값을 from에서 내려주는데 filter에서 검사를 해요.

  만약 그 값이 짝수면(2로 나눈 나머지가 0) subscribe로 내려가고 subscribe에서 출력해줘요.

  그럼 출력 결과물은

  
  

  /** 출력 결과
  2
  4
  6
  8
  10
  */

  
  

  가 되겠네요 :]

📚 Operators 응용해보기

• 위에서 해본 Operators로 응용 코드를 해석해볼게요.

  
  

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

  
  

  우선 just를 통해 "800x600"이라는 String이 내려가요.

  그 다음의 흐름을 살펴볼게요(번호는 위의 주석을 따라요).

  1. map을 통해 문자열의 x를 /로 바꿔줘요. 그럼 800x600이 800/600이 되겠죠?

  2. map으로 url을 만들어요. 위에서 내려온 결과물이 내려오니까

     "https://picsum.photos/800/600/?random"

     이 되겠네요! 이걸 위에서 1번에서 replace 해준거군요.

  3. 위의 String을 URL 객체로 만들어줘요.

  4. 여기서 filter를 하는데 생각해보면 3번 URL은 Optional이에요. 왜냐하면 이상한 String을 URL로 만들려고 한다면 당연히 nil이 생겨야하니까요! 그래서 nil이 아닌 경우만 걸러주는 작업을 해요.

  5. 4번에서 nil 제외 처리를 해줬기 때문에 강제 언래핑을 해도 절대 문제가 생길 일이 없어요!

  6. URL에 있는 내용을 다운 받은 데이터가 나와요.

  7. 6번의 데이터로 이미지를 만들어요. 여기서 결과물은 UIImage? 가 되요.

  8. 7번의 UIImage?를 ImageView에 넣어줘요.

  9. disposeBag에 insert 해주는 작업이에요!

• 위의 과정이 일련의 흐름을 만들고 있죠? 1편에서 이야기한 RxSwift의 정의를 다시 한 번 볼게요

  An API for asynchronous programming with observable streams

  여기서 observable streams라는 표현이 나오는데요, 여기서 말하는 stream이 바로 이러한 흐름을 의미해요!

  즉, observe 할 수 있는 스트림을 통해 비동기 프로그래밍을 한다는 것이고, 그게 바로 저희가 방금 해 본 것에 대한 설명이에요 :]

3편에서 이어가 볼게요!

ReactiveX

RxSwift by 곰튀김