[swift] SwiftUI와 RxCocoa를 함께 사용하는 방법

17 Nov 2023

swift

SwiftUI는 Apple이 iOS 및 macOS 앱 개발을 위해 도입한 최신 UI 프레임워크입니다. RxCocoa는 ReactiveX의 Swift 구현인 RxSwift의 UIKit 및 Cocoa 프레임워크를 위한 확장입니다. 이 두 가지를 함께 사용하면 더 강력한 앱을 개발할 수 있습니다. 이번 블로그 포스트에서는 SwiftUI와 RxCocoa를 결합하여 사용하는 방법에 대해 알아보겠습니다.

1. RxCocoa 추가하기

먼저 프로젝트에 RxCocoa를 추가해야 합니다. 이를 위해서는 CocoaPods, Carthage 또는 Swift Package Manager를 사용할 수 있습니다. 아래 예시는 CocoaPods를 사용하여 RxCocoa를 추가하는 방법입니다.

platform :ios, '13.0'
use_frameworks!

target 'YourApp' do
    pod 'RxSwift', '~> 5'
    pod 'RxCocoa', '~> 5'
end

위의 예시를 Podfile에 추가한 뒤 터미널에서 pod install 명령어를 실행하면 RxCocoa가 프로젝트에 추가됩니다.

2. SwiftUI와 RxCocoa를 연결하기

SwiftUI에서 RxCocoa를 사용하려면 SwiftUI의 View에 RxCocoa를 연결해야 합니다. 예를 들어, SwiftUI의 Button을 RxCocoa를 이용하여 처리하는 방법을 알아보겠습니다.

import SwiftUI
import RxCocoa
import RxSwift

struct ContentView: View {
    private let disposeBag = DisposeBag()
    private let buttonTap = PublishSubject<Void>()
    
    var body: some View {
        Button(action: {
            self.buttonTap.onNext(())
        }) {
            Text("Tap me")
        }
        .onAppear {
            self.buttonTap
                .subscribe(onNext: { _ in
                    // 버튼이 탭되었을 때 실행하고자 하는 로직 작성
                })
                .disposed(by: self.disposeBag)
        }
    }
}

위의 예제에서는 RxCocoa의 PublishSubject를 사용하여 버튼을 누를 때마다 buttonTap 스트림에 이벤트를 방출합니다. 그리고 buttonTap 스트림을 구독하여 버튼이 탭되었을 때 실행하고자 하는 로직을 작성할 수 있습니다.

3. SwiftUI에서 RxCocoa 사용하기

SwiftUI에서 RxCocoa를 사용하는 방법은 UIKit에서 사용하는 방법과 유사합니다. 예를 들어, SwiftUI의 TextField에 입력된 텍스트를 RxCocoa를 이용하여 처리하는 방법을 알아보겠습니다.

import SwiftUI
import RxCocoa
import RxSwift

struct ContentView: View {
    private let disposeBag = DisposeBag()
    @State private var text: String = ""
    private let textFieldText = BehaviorRelay<String>(value: "")
    
    var body: some View {
        VStack {
            TextField("Enter text", text: $text)
                .onReceive(Just(text)) { newText in
                    self.textFieldText.accept(newText)
                }
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            
            Text("You entered: \(textFieldText.value)")
        }
        .onAppear {
            self.textFieldText
                .subscribe(onNext: { text in
                    // 입력된 텍스트를 처리하는 로직 작성
                })
                .disposed(by: self.disposeBag)
        }
    }
}

위의 예시에서는 @State 속성 래퍼를 사용하여 TextField의 입력된 텍스트를 추적하고, BehaviorRelay를 사용하여 RxCocoa로 변환합니다. 그리고 onReceive를 이용하여 TextField의 텍스트가 변경될 때마다 textFieldText에 값을 전달합니다. 이후 textFieldText를 구독하여 입력된 텍스트를 처리할 수 있습니다.

마치며

이번 포스트에서는 SwiftUI와 RxCocoa를 함께 사용하는 방법에 대해 알아보았습니다. SwiftUI에서 RxCocoa를 사용하여 프로젝트를 더욱 반응형으로 만들 수 있습니다. 더 많은 RxCocoa 기능을 활용하여 SwiftUI 앱을 개발해 보세요.

1. RxCocoa 추가하기

2. SwiftUI와 RxCocoa를 연결하기

3. SwiftUI에서 RxCocoa 사용하기

마치며

참고자료