[swift] RxSwift와 SwiftUI의 연결 방법

20 Nov 2023

swift

이제 Swift 개발자들은 RxSwift와 SwiftUI를 사용하여 앱을 개발하는 것이 매우 인기가 있습니다. RxSwift는 반응형 프로그래밍을 위한 강력한 라이브러리이고, SwiftUI는 새로운 UI 프레임워크로서 간편한 UI 작성을 제공합니다. 이 두 가지 기술을 함께 사용하면 더욱 효율적인 앱 개발을 할 수 있습니다.

RxSwift와 SwiftUI의 연결 방법

RxSwift와 SwiftUI를 연결하는 방법은 매우 간단합니다. RxSwift는 SwiftUI와 통합하기 위한 몇 가지 유용한 확장을 제공합니다.

1. ObservableObject

ObservableObject는 RxSwift에서 제공하는 SwiftUI와 함께 사용되는 프로토콜입니다. 이 프로토콜을 사용하면 SwiftUI에서 애플리케이션의 상태를 구독하고 업데이트할 수 있습니다.

import Foundation
import RxSwift

class MyViewModel: ObservableObject {
    @Published var count = 0
    private let disposeBag = DisposeBag()
    
    init() {
        // RxSwift를 사용하여 count의 값이 변경될 때마다 SwiftUI에 알립니다.
        $count.asObservable()
            .observeOn(MainScheduler.instance)
            .subscribe(onNext: { [weak self] value in
                guard let self = self else { return }
                self.objectWillChange.send()
            })
            .disposed(by: disposeBag)
    }
    
    func increment() {
        count += 1
    }
    
    func decrement() {
        count -= 1
    }
}

2. Observable View

Observable View는 SwiftUI에서 RxSwift와 함께 사용되는 뷰입니다. 이 뷰는 RxSwift에서 생성된 Observable의 값을 표시하고 업데이트합니다.

import SwiftUI
import RxSwift
import RxCocoa

struct ContentView: View {
    @ObservedObject var viewModel = MyViewModel()
    
    var body: some View {
        VStack {
            Text("Count: \(viewModel.count)")
            
            HStack {
                Button(action: viewModel.decrement) {
                    Text("-")
                }
                .padding()
                
                Button(action: viewModel.increment) {
                    Text("+")
                }
                .padding()
            }
        }
    }
}

3. 사용 예시

이제 RxSwift와 SwiftUI의 연결 방법을 살펴보았으니, 간단한 예제를 통해 사용법을 확인해 보겠습니다.

import SwiftUI

@main
struct MySwiftApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

위의 예시에서는 MySwiftApp이라는 앱을 생성하고 ContentView를 root view로 사용합니다. ContentView는 위에서 작성한 Observable View입니다.

결론

RxSwift와 SwiftUI를 함께 사용하여 앱을 개발하는 것은 매우 강력한 조합입니다. 이 두 기술을 연결하여 반응형 프로그래밍을 통해 더욱 효율적이고 유지 보수가 쉬운 앱을 개발할 수 있습니다. 이제 RxSwift와 SwiftUI의 연결 방법에 대해 알아봤으니, 여러분도 새로운 앱에 이를 적용해 보시기 바랍니다.

참고 자료

RxSwift Documentation: https://github.com/ReactiveX/RxSwift
SwiftUI Documentation: https://developer.apple.com/documentation/swiftui