[RxSwift] RxSwift를 공부해보자 (2)

---

저번 RxSwift 포스팅에서 개념에 대해 간단히 다루어봤죠? 오늘은 RxSwift를 사용하여 간단한 코드를 구현해 보겠습니다.
예제를 구현하기 전에 RxSwift와 함께 사용할 RxCocoa에 대해 간단히 설명하겠습니다.

RxCocoa

RxCocoa란 우리가 Xcode로 개발을 할 때 사용하던 Cocoa Touch FrameWork를 RxSwift와 사용하기 편하도록 만든 프레임워크입니다.

기존 코드

Observable.just("Hello World")
  		.observeOn(MainScheduler.instance)
		.subscribe(onNext: {
			self.label.text = $0
		})
		.disposed(by: disposeBag)

원래라면 문자를 보내는 Observable을 메인 스레드에서 실행되도록 설정한 뒤 구독하여 label.text로 접근하여 넣어야 했지만

RxCocoa를 사용한 코드

Observable.just("Hello World")
		.bind(to: label.rx.text)
		.disposed(by: disposeBag)

RxCocoa를 사용하면 bind를 사용하여 보다 쉽게 view에 접근할 수 있습니다.

RxSwift & RxCocoa 예제

아직 Rx를 공부 중이기 때문에 코드가 깔끔하지 않을 수 있습니다.
부족한 점은 댓글 남겨주시면 감사하겠습니다.

예제로 만들 프로젝트는 Label, TextField, Button을 가진 앱입니다.

• TextField의 데이터는 Label이 표시합니다.
• Clear Button은 TextField에 데이터가 입력되었을 때 활성화됩니다.
• Clear Button을 누르면 TextField와 Label이 초기화됩니다.

textField.rx.text
	.bind(to: lable.rx.text)
	.disposed(by: disposeBag)

우선 처음으로 textField의 text를 관찰하여 값이 바뀐다면 그 값을 label에 바인딩 시켜줍니다.

textField.rx.text.orEmpty
	.map({ s -> Bool in
		s != "" ? true : false
	})
	.observe(on: MainScheduler.instance)
	.bind(to: clearButton.rx.isEnabled)
	.disposed(by: disposeBag)

그리고 orEmpty를 사용하여 String? 값을 Stirng으로 받아와 문자열이 비어있다면 false를 비어있지 않다면 true을 반환하여 문자의 입력 유무에 따라 버튼 활성화를 결정하도록 설정합니다.

clearButton.rx.tap
	.do(onNext: {
		self.clearButton.isEnabled = false
	})
	.map({ _ -> String in
		return ""
	})
	.bind(to: textField.rx.text, lable.rx.text)
	.disposed(by: disposeBag)

마지막으로 clearButton이 눌렸다면 do를 사용하여 clearButton을 비활성화하고, 빈 문자열을 textField와 label의 데이터 바인딩 시켜 초기화 시킵니다.

Input, Output 나누기

위와 같은 코드를 MVVM 패턴의 ViewModel에서 활용할 수 있도록 간단하게 input, output으로 나누어 보겠습니다.

// input
let textInputObservable = textField.rx.text.orEmpty.asObservable()
let textEmptyCheckkObservable = textInputObservable.map({ s -> Bool in s == "" ? false : true })
let clearObservable = clearButton.rx.tap.map({ _ -> String in return ""})
    
// output
textInputObservable
	.bind(to: lable.rx.text)
	.disposed(by: disposeBag)
        
textEmptyCheckkObservable
	.bind(to: clearButton.rx.isEnabled)
	.disposed(by: disposeBag)
        
clearObservable
	.do(onNext: { _ in self.clearButton.isEnabled = false })
	.bind(to: textField.rx.text, lable.rx.text)
	.disposed(by: disposeBag)

input의 동작을 하는 observable을 인스턴스로 만들어 정리하고, output에서는 인스턴스를 bind하여 처리하도록 정리할 수 있습니다.

동작

Rx로 작성한 코드가 잘 동작하는 것을 확인할 수 있습니다.

---

마치며

오늘은 Rxcocoa의 간단한 개념과 RxSwift와 Rxcocoa를 이용한 예제를 만들어 봤습니다.
아직은 RxSwift를 공부하는 단계라 코드를 짜는 게 익숙하지 않네요.. RxSwift를 더 열심히 공부해야 할 것 같습니다.
새로운 RxSwift 포스팅으로 찾아오겠습니다.