RxSwift 기초 - observable과 subscribe

Udemy RxSwift

전제조건 Prerequisite

난이도는 중간~고급 수준이기 때문에 초급 단계는 마쳐야 한다.

이 강의는 RxSwift를 위주로 전개된다.

 

functional programming 이란

예를 들어

var age = 30
age = 45

라는 코드가 있다고 하자.

이것은 명령형 프로그래밍에서는 '알맞은' 예시가 될 것이다.

 

반면에 다음과 같은 코드가 있다고 하자.

// age의 값이 someFunction 이후로 바뀔까?
var age = 30
age = 45

func someFunction() {
  print("Hellllo")
  age = 75
}

print(age)
someFunction()
print(age)

함수형 프로그래밍에서는 age의 값을 함수 내에서 바꿀 수 없다.

위 예제에서도 마지막 age는 값이 45로 그대로다.

이런 함수를 이용한 함수형 프로그래밍은

concurrency를 보장하지 못하거나 deadlock 등 객체지향프로그래밍에서 나타날 수 있는

부작용을 최대한 없앨 수 있는 프로그래밍이다.

설명이 빈약하게 느껴질 것이다.

앞으로는 reative functional programming이란 무엇인지

iOS를 가지고 설명할테니 쭉 따라가보자.

 

RxSwift

개념

RxSwift는 비동기적으로 프로그램을 돌아가게 만드는 것이다.

내 코드가 새로운 데이터에 반응하게 만들고, 시퀀스대로 진행시킬 수 있게 만드는 것이다.

 

예를 들어 한 테이블뷰가 올라간 뷰를 보고 있다고 가정하자.

테이블뷰에는 여러 가지 셀들이 올라가 있는 상태다.

각각의 셀들은 이미지와 텍스트를 가진다.

또한 화면에는 탭바가 올라가 있어서 탭바를 클릭시 또다른 화면으로 전환된다고 하자.

 

여기에서 각각의 기능들이 비동기적으로 움직이게 만들기 위해서는

우리는 다음과 같은 것들을 사용해야 한다:

NotificationCenter, Delegate Pattern, Grand Central Patch, Closures

 

RxSwift 는 이러한 비동기적 처리를 도와주는 것이다.

RxSwift 는 CocoaPods를 통해 install 한 뒤 사용가능하다.

podfile에는 다음을 추가하여 install할 수 있다.

pod 'RxSwift', '~> 4.0'

뒤에 있는 숫자는 버전이며, 버전 정보는 https://cocoapods.org에서

RxSwift를 검색하여 찾을 수 있다.

pod install에 성공했다면 .xcworkspace file을 시작하면 된다.

(프로젝트 명이 RxSwift이면 안 된다!)

 

잘 되는지 테스트하기

기본적으로 생성되는 ViewController.swift 파일 안에

import RxSwift를 해주고

viewDidLoad 내에

_ = Observable.from([1, 2, 3, 4, 5])를 적어준 뒤 실행해보자.

오류 없이 실행된다면 잘 설치된 것이다.

 

Playground 생성

playground를 하나 생성해주자. file->new에서 생성할 수 있다.

그리고 해당 플레이그라운드 프로젝트 폴더에 add해준다.

프로젝트에서 폴더 우클릭-add Files to ... 로 할 수 있다.

여기까지 했다면 방금 적어준 코드를 playground 파일에 넣고 실행해보자.

import RxSwift

_ = Observable.from([1, 2, 3, 4, 5])

 

Observable

RxSwift의 핵심은 Observable이다.

Observable은 Sequence라고도 한다.

Observable은 string이든 int든 모든 타입을 리턴할 수 있다.

 

이제 obeservable을 설명하겠다.

예를 들어 가로축이 시간인 다음 그림에서

세 번의 tap이 일어났다고 하자.

첫 번째는 slider Value의 값을 변경하는 tap이고

두, 세 번째는 button을 클릭하는 tap이라 하자.

 

 

 

이 경우 Observable은 sliderValue를 구독(subscribe)함으로써

첫 번째 탭에서 slider value의 값이 바뀌는 것을 감지해 낼 수 있다.

iOS 프로그래밍에서 이러한 값들을 가져오기 위해 얼마나 많은 작업을 해야 했는지 떠올려본다면 굉장한 기능이라는 것을 눈치챘을 것이다.

어떤 셀을 클릭하거나, 내가 선언한 변수 값이 변경되거나 하는 일이 모든 viewController에서 일어난다. amazing한 기능이라는 감이 벌써부터 온다.

그러면 이것을 구체적으로 어떻게 쓰는지 한번 파악해보자.

 

observable test

이번 파트에서는 observable의 .just, .of, .from 그리고 subscribe에 대해 살펴볼 것이다.

 

먼저 아까 생성한 playground에 다음을 적어주자.

import UIKit
import RxSwift

// Observable은 많은 메서드를 가짐.
// .just는 단일 변수를 생성.
let observable1 = Observable.just(1)

// Observable.of는
// 배열이나 서로 다른 자로형 set를 만들 수 있음.
// observable2는 다음과 같은 형태: let observable2: Observable<Observable<Int>.E>
let observable2 = Observable.of(1, 3, 7)

먼저 observable1에서 observable.just는 단일 변수를 생성한다.

그리고 observable2에서의 .of는 배열이나 서로 다른 자료형 set을 만들어낸다.

 

//  observable3, 4는 다음과 같은 형태: Observable<Observable<[Int]>.E>
let observable3 = Observable.of([1, 3, 7])

let observable4 = Observable.from([1, 2, 3, 4, 5])

observable3는 .of를 썼지만 배열을 담았고,

observable4는 .from을 썼는데, 이 from은 .of처럼 배열을 담을 수 있다.

둘의 차이는 from이 요소 하나하나를 리턴하는 반면 of는 배열 전체를 리턴한다는 데에 있다.

이 차이를 이제 subscribe와 함께 살펴보자.

 

observable.subscribe

observable을 subscribe해보자.

observable.subscribe { (event) in } 이 기본형태이며,

해당 event를 출력하는 예시는 다음과 같다.

 

observable3을 이용했으며, 그냥 event를 출력했을 때에는

next이벤트와 completed 이벤트 모두 출력되고 있다.

observable3.subscribe { (event) in
    print(event)
}
/*
 next([1, 3, 7])
 completed
 */

 

그렇다면 요소만 출력하려면 어떻게 해야 할까?

정답은 event속 element를 추출하여 print하는 것이다.

다음과 같이 말이다.

observable3.subscribe { (event) in
    if let element = event.element {
        print(element)
    }
}
/*
 [1, 3, 7]
 */

 

이제 subscribe를 간단하게 쓰는법과 element만 추출하는 법을 배웠다.

그러면 .of와 .from의 차이를 보여주는 예제도 살펴보자.

 

.of를 쓴 observable3는 배열 전체를 출력했다.

그러나 .from을 쓴 observable4는 배열 요소 하나하나를 출력할 것이다.

observable3를 위에서 출력해본 것처럼 observable4를 한번 출력해보면 다음과 같이 나온다.

observable4.subscribe { (event) in
    print (event)
}
/*
 next(1)
 next(2)
 next(3)
 next(4)
 next(5)
 completed
 */

observable4.subscribe { (event) in
    if let element = event.element {
        print(element)
    }
}
/*
 1
 2
 3
 4
 5
 */

 

차이를 조금 알겠는가?

그렇다면 이번에는 event속에 있는 element를 매번 까서 그 안에 있는 값을 꺼내오지 말고,

해당 값을 바로 받아와보자.

observable.subscribe(onNext: ) 메서드가 그것을 가능하게 해준다.

예시를 살펴보자.

 

observable4.subscribe(onNext: { (event) in
    print(event)
})
/*
 1
 2
 3
 4
 5
 */

 

다음 편에 계속...