ReactorKit과 RxSwift를 활용한 네트워크 호출 구현하기:ReactorKit과 RxSwift 통합

작성일 : 2024-06-29

ReactorKit과 RxSwift를 활용한 네트워크 호출 구현하기: ReactorKit과 RxSwift 통합

반응형 프로그래밍은 데이터 흐름과 데이터의 변경을 감지하고 이에 반응하는 프로그래밍 패러다임으로, 최근 들어 많은 관심을 받고 있습니다. iOS 개발 분야에서도 RxSwift와 ReactorKit을 통해 이러한 반응형 프로그래밍을 구현할 수 있습니다. 이 글에서는 ReactorKit과 RxSwift를 통합하여 네트워크 호출을 구현하는 방법을 단계별로 설명합니다.

Introduction to ReactorKit와 RxSwift

ReactorKit이란?

ReactorKit은 iOS 애플리케이션 개발에서 단방향 데이터 흐름(Unidirectional Data Flow, UDF) 패턴을 구현하기 위한 프레임워크입니다. 이 패턴은 데이터의 흐름을 한 방향으로 고정시켜 유지보수가 용이하게 하고, 애플리케이션의 상태 관리를 명확히 합니다. ReactorKit의 주요 구성요소는 다음과 같습니다:

Reactor: 상태 변화를 처리하고, 액션을 받아 상태를 갱신합니다.
Action: 사용자의 입력이나 외부 신호를 나타내는 이벤트입니다.
State: 애플리케이션의 현재 상태를 나타냅니다.

RxSwift란?

RxSwift는 반응형 프로그래밍을 iOS에 구현하기 위한 Reactive Extensions reactivity 패키지입니다. 데이터를 스트림으로 처리하고, 비동기적인 이벤트를 쉽게 관리할 수 있게 해줍니다. Observable, Observer, Subject 등과 같은 개념을 사용하여 데이터의 흐름을 체계적으로 관리하게 됩니다.

ReactorKit과 RxSwift의 통합 필요성

ReactorKit과 RxSwift는 서로 보완적인 관계입니다. ReactorKit은 데이터의 흐름과 상태 관리를 책임지며, RxSwift는 비동기적 이벤트 처리와 스트림 관리를 신속하게 실행할 수 있습니다. 이 두 프레임워크를 결합하면 견고하고 유지보수가 쉬운 애플리케이션을 개발할 수 있습니다.

프로젝트 설정

종속성 추가

먼저, Podfile에 필요한 종속성을 추가해야 합니다. 프로젝트 폴더의 루트 디렉토리에 Podfile을 생성하거나 수정하여 아래와 같이 추가합니다:


ruby
# Podfile
platform :ios, '11.0'
use_frameworks!
target 'YourTargetName' do
  pod 'RxSwift', '~> 6.0'
  pod 'RxCocoa', '~> 6.0'
  pod 'ReactorKit', '~> 3.0'
end

다음으로, 터미널에서 pod install을 실행하여 종속성을 설치합니다.


bash
$ pod install

ReactorKit 설정

Reactor 생성하기

ReactorKit의 핵심은 Reactor입니다. Reactor는 상태를 정의하고, 상태를 갱신하며, 외부에서 발생한 Action을 처리합니다. 네트워크 호출을 위한 Reactor를 생성해 보겠습니다.


swift
import ReactorKit
import RxSwift

class NetworkReactor: Reactor {
    // Action 정의
    enum Action {
        case fetchData
    }

    // State 정의
    struct State {
        var data: String?
        var isLoading: Bool = false
    }
    
    let initialState: State
    private let disposeBag = DisposeBag()

    init() {
        self.initialState = State()
    }

    // 각 Action에 대한 처리를 정의
    func mutate(action: Action) -> Observable<Mutation> {
        switch action {
        case .fetchData:
            return Observable.concat([
                Observable.just(Mutation.setLoading(true)),
                fetchNetworkData().map { Mutation.setData($0) },
                Observable.just(Mutation.setLoading(false))
            ])
        }
    }

    // 변화를 정의
    enum Mutation {
        case setLoading(Bool)
        case setData(String)
    }

    // Mutation을 State로 적용
    func reduce(state: State, mutation: Mutation) -> State {
        var newState = state
        switch mutation {
        case .setLoading(let isLoading):
            newState.isLoading = isLoading
        case .setData(let data):
            newState.data = data
        }
        return newState
    }
}

Network Service 구현하기

네트워크 호출을 처리하기 위해 별도의 서비스를 만들어 보겠습니다. 이 서비스는 비동기적으로 데이터를 가져오고, 결과를 Observable로 반환합니다.


swift
import RxSwift

class NetworkService {
    func fetchNetworkData() -> Observable<String> {
        return Observable.create { observer in
            let url = URL(string: "https://api.example.com/data")!
            let task = URLSession.shared.dataTask(with: url) { data, response, error in
                if let error = error {
                    observer.onError(error)
                } else if let data = data, let stringData = String(data: data, encoding: .utf8) {
                    observer.onNext(stringData)
                    observer.onCompleted()
                }
            }
            task.resume()
            return Disposables.create { task.cancel() }
        }
    }
}

NetworkReactor에서 이 서비스를 사용하여 네트워크 데이터를 가져오는 코드를 추가합니다.


swift
class NetworkReactor: Reactor {
    // 기존 코드 생략
    private let networkService = NetworkService()

    private func fetchNetworkData() -> Observable<String> {
        return networkService.fetchNetworkData()
    }
}

ViewController 설정

UI와 바인딩하기

마지막으로, ViewController에서 Reactor를 사용하여 UI를 설정하고 바인딩합니다.


swift
import UIKit
import RxSwift
import RxCocoa
import ReactorKit

class NetworkViewController: UIViewController, View {
    var disposeBag = DisposeBag()
    let reactor = NetworkReactor()
    
    // UI 요소들
    let dataLabel = UILabel()
    let activityIndicator = UIActivityIndicatorView()
    let fetchButton = UIButton(type: .system)

    override func viewDidLoad() {
        super.viewDidLoad()
        self.reactor = reactor
        setupUI()
    }

    private func setupUI() {
        // UI 설정 코드 생략
    }

    func bind(reactor: NetworkReactor) {
        // Action 바인딩
        fetchButton.rx.tap
            .map { NetworkReactor.Action.fetchData }
            .bind(to: reactor.action)
            .disposed(by: disposeBag)

        // State 바인딩
        reactor.state.map { $0.data }
            .distinctUntilChanged()
            .bind(to: dataLabel.rx.text)
            .disposed(by: disposeBag)

        reactor.state.map { $0.isLoading }
            .distinctUntilChanged()
            .bind(to: activityIndicator.rx.isAnimating)
            .disposed(by: disposeBag)
    }
}

결론

이제 RxSwift와 ReactorKit을 통해 반응형 프로그래밍을 효율적으로 구현할 수 있는 셋업을 완료했습니다. 이를 통해 네트워크 호출과 같은 비동기 작업을 더욱 효율적이고 이해하기 쉽게 처리할 수 있습니다. 이러한 접근 방식은 유지보수성, 확장성, 그리고 코드의 가독성을 대폭 향상시킵니다. 실무에서도 이러한 기술을 활용하여 복잡한 애플리케이션 상태 관리를 단순화해 보세요.