operator

Observable이 수행하는 메소드. Observable에서 파생되는 스트림을 구성하는 rxSwift의 핵심요소라고 할 수 있다. 

Observable에는 수행가능한 여러가지 operator가 있는데, 그중 대표적인것들에 대해서 적어보려고 한다. 

 

just()

static func just(_ element: [String]) -> Observable<[String]>
//returns an Observable sequence that contains a single element
Observable.just(_ element: )

입력 요소에 대해 그대로 반환되는 연산자이다. 예시를 통해 보자. 

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

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

배열을 넣어도 배열이 통째로 출력되는 모습을 볼 수 있다.


from()

public static func from(_ array: [Element]) -> Observable<Element>
//Converts an array to an observable sequence.
Observable.from(_ array: [_])

배열의 원소들을 Observable의 형태로 리턴해준다.

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

from을 통해 나오는 Observable<String>형태의 원소들이 subscribe(OnNext: )부분에서 출력이 된다.


map()

func map<Result>(_ transform: @escaping (String) throws -> Result) -> Observable<Result>
//Projects each element of an observable sequence into a new form.

swift에서의 map()과 같은 동작을 하는 operator이다. Observable에서 생성되어 내려오는 데이터들에 closure에 적힌 동작에 따라 가공하여 리턴해준다. 

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

@IBAction func exMap2() {
    Observable.from(["RxSwift", "ReactiveX"])
        .map { $0.count }
        .subscribe(onNext: { str in
            print(str)
        })
        .disposed(by: disposeBag)
}
//7
//9 출력

아마도 가장 많이 쓰게될 operator가 아닐까 생각된다.


filter()

func filter(_ predicate: @escaping (Int) throws -> Bool) -> Observable<Int>
//Filters the elements of an observable sequence based on a predicate.

swift의 filter()함수와 동일하게 동작하는 오퍼레이터이다. 서술한 조건에 맞는 경우에만 Observable을 내보낸다.

@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)
}
//2
//4
//6
//8
//10 출력

배열요소들 중에 짝수인 요소만 출력된다.


stream

우리는 이러한 여러가지 오퍼레이터들을 통해 Observable을 가공하여 비동기 프로그래밍을 할 수 있게 된다. 앞의 글에서도 설명했지만 이러한 가공의 과정을 stream이라 부르기로 했고, 이러한 Observable을 통한 stream을 통해 비동기 프로그래밍을 할 수 있게 해주는 것이 RxSwift이다.

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

Observable이 여러가지 오퍼레이터를 통해 어떤식으로 변화하는지 주석으로 적어놓았다. 

 

이외에도 정말 많은 오퍼레이터들이 있으며, 사용처에 따라 알맞은 오퍼레이터를 사용하면 된다. 각 오퍼레이터에 대한 상세한 내용들도 홈페이지에서 열람 가능하다.

 

[참고영상]

[유튜브] 곰튀김 RxSwift 4시간에 끝내기 - 4

[유튜브] 곰튀김 RxSwift 4시간에 끝내기 - 5

'iOS > RxSwift' 카테고리의 다른 글

scheduler  (0) 2022.08.31
next, error, complete  (0) 2022.08.19
subscribe, dispose  (0) 2022.06.15
Observable stream  (0) 2022.06.08
ReactiveX  (0) 2022.05.30

 

sync, async

Rx에서 가장 중요한 개념인 Observable에 대해 이야기하기전에 우선 동기(sync)와 비동기(async) 프로그래밍에 대해 간단하게 설명하고자 한다. 

private func loadImage(from imageUrl: String) -> UIImage? {
        guard let url = URL(string: imageUrl) else { return nil }
        guard let data = try? Data(contentsOf: url) else { return nil }
        
        let image = UIImage(data: data)
        return image
}

 

여기 URL요청을 통해 이미지를 불러와 UIImage 형태로 리턴해주는 함수가 있다. 동기방식으로 처리할경우 이미지를 요청하고 요청에 대한 응답을 받아야만 다음처리가 가능해진다. 이에 반해 비동기방식은 요청을 하고난 후 응답을 받기 전에 다음 작업들을 이어서 처리하다가 요청에 대한 응답이 수신되면 응답에 대한 처리를 마저 하게되는 방식이다.  동기방식은 요청에 대한 응답이 올때 까지 대기. 비동기방식은 요청에 대한 응답을 대기하지 않고 다음작업들을 처리. 차이라고 보면 된다. 아래의 코드를 통해 두 방법의 차이를 확인해보자.

 

//동기방식
@IBAction func onLoadSync(_ sender: Any) {
    let image = loadImage(from: IMAGE_URL)
    imageView.image = image
}

//비동기방식
@IBAction func onLoadAsync(_ sender: Any) {
    DispatchQueue.global().async {
        let image = self.loadImage(from: self.IMAGE_URL)
        DispatchQueue.main.async {
            self.imageView.image = image
        }
    }
}

 

우측의 시간카운터를 보면 동기방식과 비동기방식의 차이를 확인할 수 있다. 

 

동기방식으로 요청을 처리할경우, 응답을 받을 때까지 아무런 작업을 할 수 없게된다. 이렇게 동기방식으로 작성된 앱은 사용자에게 큰 불편을 유발하게 된다. 하지만 위의 예시처럼 비동기 방식으로 작성하게되면 코드의 가독성이 떨어진다.

Observable stream

다음은 RxSwift로 작성된 비동기 코드를 보자.

var disposebag = DisposeBag()
@IBAction func onLoadRxAsync(_ sender: Any) {
    Observable.just(self.IMAGE_URL)
        .subscribe(on: ConcurrentDispatchQueueScheduler(qos: .default))
        .map{self.loadImage(from: $0)}
        .observe(on: MainScheduler.instance)
        .subscribe(onNext: { image in
            self.imageView.image = image
        })
        .disposed(by: disposebag)
}

처음 Rx코드를 보았을때 오히려 코드라인이 늘어나서 당황했다. 하지만 코드의 흐름을 보면 들여쓰기와 중괄호가 아닌 Observable에서 시작되는 메소드들로 흘러가는 모양을 볼 수 있고, 마지막 subscribe부분에서 UI처리를 하는 모습을 볼 수 있다. 이러한 형태가 바로 이전글에 Rx의 정의를 이해할 수 있는 좋은 예시이다.

An API for asynchronous programming
with "observable streams"

Observable에서 파생되는 stream(흐름)을 통한 비동기 프로그래밍 API. 즉 Observable에서 시작되는 반환값이 여러가지 Operator, Subject, Scheduler들로 이루어진 흐름을 통해 비동기 프로그래밍을 할 수 있는 API라고 할 수 있다. 이것이 Rx의 정의이다.

 

참고영상

[유튜브] 곰튀김 RxSwift 4시간에 끝내기 - 2

'iOS > RxSwift' 카테고리의 다른 글

scheduler  (0) 2022.08.31
next, error, complete  (0) 2022.08.19
operator  (0) 2022.07.21
subscribe, dispose  (0) 2022.06.15
ReactiveX  (0) 2022.05.30

+ Recent posts