[RxSwift] Observable

RxSwift 개념 정리글에서 RxSwift의 정의에 대해 정리해보며,

Observable이 반응형(Reactive) 프로그래밍의 가장 큰 핵심이다. 라고 정리했습니다.

그렇다면 이 중요한 개념! Observable이 무엇인지, 어떻게 만드는지, 어떻게 사용하는지에 대해서 좀 더 자세히 알아봅시다!

Observable

Observable의 개념부터 다시 가져와서 설명해보자면,

ReactiveX에서 Observable 객체는 사전적인 의미대로 어떤 '객체'를 관찰할 수 있는 형태로 만드는 것을 말하며,

Observable 객체를 생성함으로써 Observer는 관찰을 시작(구독)하게 됩니다.

이 '객체'에 따라 실제 관찰하는 값(== 스트림에 흘려보내는 값) 혹은 관찰의 대상인 사건(== 이벤트)이 결정됩니다.

즉, Observable은 관찰 가능한 데이터의 흐름입니다. Observer가 Observable을 구독하고, Observable이 방출하는 이벤트에 반응하는 것이 반응형(Reactive) 프로그래밍의 가장 큰 핵심이라고 할 수 있을 것 같습니다.

 

observable, observable sequence, sequence라는 표현을 쓰는데 사실 다 같은 말입니다.

중요한 것은 이벤트가 비동기적으로 생성된다는 것입니다!

observable은 일정기간 동안 계속해서 이벤트를 생성해 스트림에 흘려보내는데, 이러한 과정을 방출(emit)이라고 합니다.

또한 각각의 이벤트들은 숫자나 커스텀한 인스턴스등과 같은 값을 가질 수 있고, 또는 탭과 같은 제스처일 수도 있습니다.

 

이벤트를 어떻게 생성해서 어떻게 흘려보내는 거지?? 글로만 봐서는 이해가 잘 가지 않습니다.🥺😭

이러한 개념들을 가장 잘 이해할 수 있는 방법은 marble diagrams를 이용하는 것입니다. (그림으로 쉽게 봅시다!)

• marble diagram: 시간의 흐름에 따라서 값을 표시하는 방식
• 시간은 왼쪽에서 오른쪽으로 흐른다는 가정
• 참고하면 좋을 사이트: RxMarbles

Observable의 생명주기

observable의 생명주기를 marble diagram을 통해 알아봅시다!

옵저버블에는 next, completed, error 이렇게 세가지 구성요소가 있습니다. 하나씩 살펴볼게요!

 

1. next

next 이벤트를 통해 각각의 요소들을 방출합니다.

 

2. completed

세 번의 tap 이벤트를 방출한 뒤 이벤트들이 다 방출되면 완전 종료됩니다. 이는 completed 이벤트가 발생된 것입니다.

 

3. error

error 이벤트도 방출 후, 완전 종료되는 이벤트입니다. 하지만 에러가 발생되었을 때는 error 이벤트를 통해 종료됩니다.

 

Observable 만들기

observable 생성 연산자를 이용해 observable을 만들 수 있습니다.

just, of, from, empty, never, range, repeatElement, interval, create 등 다양한 생성 연산자들이 있는데요,

이 게시물에서는 가장 대표적인 just, of, from에 대해서만 자세히 보도록 할게요!

예시 코드에서는 연산자에 대한 이해를 돕기 위해 subscribe까지 해서 출력까지 해보고, 뒤에서 subscribe에 대해

자세히 정리하도록 하겠습니다!

just

오직 하나의 Element를 포함하는 Observable Sequence를 생성합니다.

let observable1 = Observable.just([1, 2, 3])
observable1.subscribe {
  print($0)
}

// 출력 결과
// next([1, 2, 3])
// completed

• just는 Observable의 타입 메소드입니다.
• 이름에서 추측할 수 있듯, 오직 하나의 요소를 포함하는 Observable sequence를 생성합니다.

of

가변적인 element를 포함하는 Observable Sequence를 생성합니다.

let observable2 = Observable.of(1, 2, 3)
observable2.subscribe { event in
  print(event)
}

// 출력 결과
// next(1)
// next(2)
// next(3)
// completed

• element가 많지만  observable2의 타입은 배열이 아닌 Observable<Int> 타입입니다.
• .of 연산자는 주어진 값들의 타입추론을 통해 Observable sequence를 생성합니다.
• 따라서, 어떤 array를 observable array로 만들고 싶다면, array를 .of 연산자에 집어 넣으면 됩니다.

let observable3 = Observable.of([1, 2, 3])
observable3.subscribe {
  print($0)
}

// 출력 결과
// next([1, 2, 3])
// completed

• observable3의 타입은 Observable<[Int]>
• 이렇게 하면 just 연산자를 쓴 것과 같이 [1,2,3]를 단일요소로 가지게 됩니다.

from

array의 요소들로 Observable Sequence 생성합니다.

let observable4 = Observable.from([1,2,3])
observable4.subscribe { event in
  print(event)
}

// 출력 결과
// next(1)
// next(2)
// next(3)
// completed

• observable4의 타입은 Observable<Int>
• from 연산자는 일반적인 array 각각 요소들을 하나씩 방출합니다.
• from 연산자는 오직 array 만 취합니다.

Observable 구독하기

위 코드들에서 생성한 Observable은 subscribe 메소드를 통해 구독을 해야만 이벤트가 출력되는 것을 확인할 수 있습니다.

Observable은 실제로 sequence의 정의일 뿐, Observer가 subscribe하지 않는다면 아무런 이벤트도 내보내지 않습니다. Subscribe는 observable의 stream(데이터 흐름)을 관찰하고 구독하는 역할을 합니다.

여기서 구독을 하는 주체는 observer, 구독 대상은 observable 입니다!

구독하는 방법

Observable을 구독하고 싶을 때 subscribe()를 이용해 구독을 선언합니다.

 

이때, Observable이 방출하는 각각의 이벤트 타입에 대해서 handler(어떤 일이 끝났을 때 진행할 일을 담당하는 친구)를

추가할 수 있습니다. 구독을 하게 되면, 위에서 본 것 처럼 Observable은 .next, .error, .completed 이벤트들을 방출하게 됩니다.

• .next는 handler를 통해 방출된 요소를 패스할 것입니다.
• .error는 error 인스턴스를 가질 것입니다.

.subscribe()

.subscribe는 escaping 클로저로, Int타입의 값이 event로 전달됩니다. (이 예제에서는 Observable<Int>로 보고 있으니! )

escaping에 대한 리턴값은 없으며(Void), .subscribe은 Disposable을 리턴합니다.

위에서 예시 코드 하나만 다시 가져와서 살펴봅시다!

let observable4 = Observable.from([1,2,3])
observable4.subscribe { event in
  print(event)
}

// 출력 결과
// next(1)
// next(2)
// next(3)
// completed

프린트된 값을 보면, Observable은 각각의 요소들에 대해서 .next 이벤트를 방출하며, 최종적으로 .completed를 방출합니다.

 

Observable을 이용하다보면, 방출된 값을 가지고 원하는 처리를 하는 경우가 많기 때문에 대부분의 경우 Observable이 .next 이벤트를 통해 방출하는 요소에 가장 관심가지게 될 것입니다.

observable.subscribe { event in
  if let element = event.element {
    print(element)
  }
 }
 
 /* Prints:
  1
  2
  3
 */

 

위와 같이 값을 받을 수도 있겠지만,

아주 자주 쓰이는 패턴이기 때문에 RxSwift에는 이 부분에 대한 축약형들이 있습니다.

Observable이 방출하는 .next 이벤트를 쉽게 받아서 처리하기 위해 사용하는 .onNext subscribe연산자에 대해 살펴봅시다.

.subscribe(onNext: )

.onNext 클로저를 이용해 위의 코드를 아래와 같이 바꿀 수 있습니다.

observable.subscribe(onNext: { (element) in
  print(element)
 })
 
 /* Prints:
  1
  2
  3
 */

.onNext 클로저는 .next 이벤트만을 전달인자로 받아 핸들링하고, 다른 것들은 모두 무시하게 됩니다.

Observable 구독 취소하기

지금까지 observable이 방출하는 이벤트를 구독해서 이벤트를 받아오는 작업을 했습니다.

이벤트를 받아서 원하는 처리도 하고, 가져다가 하고싶은거 다했다면??

이제 그만..구독 취소를 해야겠죠? 이제 놔줍시다..왜냐면..메모리 누수가 일어나니까요..

옵저버블...놔주는거..그거 어케 하는건데..

 

Observable은 subscription을 받기 전까진 아무 짓도 하지 않습니다. (구독을 당해야 이벤트 방출)

따라서 반대로 생각해보면 Observable에 대한 구독을 취소함으로써 Observable을 수동적으로 종료시킬 수 있습니다. (비동기 작업을 중간에 멈추고 취소하고 싶을 때 사용할 수 있겠죠?)

위에서 .subscribe가 disposable을 리턴한다고 했습니다. (==리턴 값으로 disposable한 객체를 만들어주는 것) 구독 취소 시, 요 disposable을 이용합니다.

1) .dispose()

어떤 작업을 중단하고 취소하고 싶다면 간단하게 dispose()를 호출하면 됩니다.

구독을 취소(dispose)한 뒤에는 이벤트 방출이 정지됩니다.

    let observable = Observable.of("A", "B", "C")  // 옵저버블 생성
     
    let subscription = observable.subscribe({ (event) in  // 옵저버블 구독
         
        print(event)  // 방출되는 이벤트 프린트
    })
     
    subscription.dispose()   // dispose()호출로 구독 취소!

여기서 드는 의문..🤔

이벤트들이 다 방출된 후 completed 된다고 앞에서 말했는데 왜 구독을 수동적으로 취소해야하는거죠..??

위의 코드의 경우, observable 안에는 3개의 요소만 있으므로 dispose() 를 호출하지 않아도 completed가 프린트 되지만

요소가 무한히 있다면 dispose() 를 호출해야 completed 가 프린트 됩니다!

2) DisposeBag()

각각의 구독에 대해서 일일히 관리하는 것(생성하는 subscription 마다 dispose해주는 것)은 효율적이지 못하기 때문에, 

RxSwift에서 제공하는 DisposeBag 타입을 이용할 수 있습니다. 말 그대로, Disposable타입을 담을 수 있는 클래스입니다.

 

사용방법은??

subscribe()의 리턴타입인 Disposable에서 disposed(by:)메소드를 호출하면 사용할 수 있습니다. (아주 자주 사용하게 될 형태입니다)

방출된 리턴값들을 disposeBag에 다 갖다 넣어놓으면, disposeBag이 메모리에서 해제될 때 모든 구독이 취소됩니다!

disposeBag 선언 → 여러 옵저버블에 대한 disposable을 disposebag에 모두 넣기 → 메모리에서 해제될 때 구독취소

  let disposeBag = DisposeBag()  // 일단 disposeBag을 만듭니다.
     
  Observable.of("A", "B", "C")   // 옵저버블을 생성합니다.
      .subscribe{ 
          print($0)   // 방출되는 이벤트 프린트
      }
      .disposed(by: disposeBag)  // subscribe로부터 방출된 리턴값을 disposeBag에 추가합니다.

---

[참고자료]

GitHub - fimuxd/RxSwift: RxSwift를 스터디하는 공간

 

[RxSwift] Observable이란 - (2) - jinShine

 

[RxSwift] Observable (2)

 

RxSwift - Dispose & DisposeBag