[iOS] ReactorKit이란?

안녕하세요 제인입니다!

오늘은 최근 진행 중인 프로젝트를 MVVM 구조로 리팩토링을 하며 도입하게된 ReactorKit(리액터킷)에 대해 정리해보려 합니다.

바로 시작할게요!!

ReactorKit이란?

ReactorKit은 반응 및 단방향 Swift 애플리케이션 아키텍처를 위한 프레임워크입니다.

MVVM과 같은 아키텍처에 대해 공부해보신 분들이라면 느끼셨겠지만 아키텍처는 규격화된 형식이 없기 때문에 

개발자, 회사마다 쓰는 방식이 정말 다르고 다양합니다.

하지만, ReactorKit은 형식이 존재하기 때문에 MVVM 아키텍처를 프로젝트 내에서 정형화된 방식(같은 템플릿)으로 적용할 수 있다는 장점이 있습니다.

ReactorKit을 사용하는 곳

 

실제로 위와 같이 많은 회사에서 ReactorKit을 사용하고 있다고 합니다!

 

ReactorKit이 어떤 것인지, 어떤 용도로 사용하는 것인지 파악했으니

어떤 구조인지, 어떻게 사용하는 것인지 좀 더 자세히 알아보도록 하겠습니다!!

ReactorKit의 구조

ReactorKit은 크게 View와 Reactor로 이루어져있으며
View 는 Reactor 에게 Action을 전달하고 Reactor는 View에게 State를 전달하는 단방향 구조입니다.

 

• View: 사용자에게 보여지는 데이터 및 UI. View는 사용자의 입력을 Action Stream으로 바인딩하고 View의 State를 각각의 UI 컴포넌트들에 바인딩한다. View 레이어는 비즈니스 로직을 포함하지 않으며 하나의 뷰는 Action Stream과 State Stream을 매핑하는 방법을 정의하기만 한다.
• Reactor: View의 상태를 관리하는 UI 독립 계층으로, ViewModel과 같은 역할을 한다. Reactor의 가장 중요한 역할은 흐름 제어를 뷰에서 분리하는 것이다. 모든 뷰는 1:1로 대응되는 Reactor를 가지고 모든 로직을 Reactor에 위임한다. Reactor는 뷰에 대한 의존성이 없으므로 쉽게 테스트가 가능하다.

ReactorKit을 사용해보자

Counter 예제를 통해서 ReactorKit을 이용한 MVVM 아키텍처 적용을 연습해보도록 하겠습니다!

위의 동작과 같이 + 버튼 클릭시 로딩 인디케이터가 1초 동안 돌아가고, 이후에 현재의 숫자에서 1이 더해진 값으로 화면에 표시됩니다. 반대로 - 버튼 클릭시 1 마이너스 된 값이 업데이트 되어 화면에 표시될 수 있도록 하는 간단한 화면을 구성해보겠습니다.

 

import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        let window = UIWindow(windowScene: windowScene)
        let vc = CounterVC()
        vc.view.backgroundColor = .white
        window.rootViewController = vc
        
        // vc에 reactor 주입
        vc.reactor = CounterViewReactor()
        self.window = window
        window.makeKeyAndVisible()
    }
    ...
}

 

우선, 스토리보드를 사용하지 않고 코드로 UI 를 구성할 것이기 때문에 SceneDelegate에서 window 객체를 만들어 화면을 초기화 해주고, 앱의 첫 화면이 될 window의 rootViewController를 지정해줍니다.  

 

그런 다음, ViewController에게 reactor를 주입해줍니다.

ViewModel을 사용해 MVVM 구조를 만드는 것과 가장 다른 과정이 이렇게 reactor를 주입해주는 과정인 것 같은데요, ReactorKit에서는 주입 과정이 없다면 화면이 동작 하지 않습니다.

참고로, 해당 예제는 간단한 예제라 하나의 뷰만 존재하지만, 여러 뷰로 이루어진 프로젝트에서는 위에서 설명한 것과 같이 View와 Reactor가 1:1로 대응되기 때문에 reactor를 주입해주는 과정을 화면 전환 시에 해주면 됩니다!

 

이제 Reactor와 View를 구성해봅시다.

 

위에서 설명했듯이 View는 Reactor에게 Action을 전달하고, Reactor는 로직을 처리해서 View에게 State를 전달합니다.

그렇다면 이 예제에서 View가 방출하는 Action은?

• + 버튼 클릭 이벤트
• - 버튼 클릭 이벤트

이 두가지 입니다!

Reactor가 View에 전달하는 State는?

• 숫자 값
• 로딩 인디케이터의 상태 (true or false)

이렇게 두가지임을 기억해두고 View와 Reactor를 구현해봅시다!

Reactor

먼저, Reactor부터 구현해봅시다.

 

import Foundation
import RxSwift
import RxCocoa
import ReactorKit

// ViewModel의 역할을 하는 Reactor
// VC에서 Action을 보내면 Reactor의 내부에서 mutate와 reduce의 과정을 거쳐서 State를 방출해서 VC로 다시 보냄
// VC가 리액터의 state를 구독하는 형태
class CounterViewReactor: Reactor {
    let initialState = State()
    
    enum Action {
        case plus
        case minus
    }
    
    enum Mutation {
        case plusValue
        case minusValue
        case setLoading(Bool)
    }
    
    struct State {
        var value = 0
        var isLoading = false
    }
    
    // mutate()는 Action 스트림을 Mutation 단위로 방출해주는 역할을 하는 Reactor의 내부 함수
    // 옵저버블: 관찰가능한 데이터의 흐름. Mutation타입의 element가 담긴 옵저버블이 리턴타입인 것
    func mutate(action: Action) -> Observable<Mutation> {
        switch action {
        case .plus:
            return Observable.concat([ // concat은 두개 이상의 옵저버블 직렬로 연결하는 operator
                Observable.just(.setLoading(true)),
                Observable.just(.plusValue).delay(.seconds(1), scheduler: MainScheduler.instance),
                Observable.just(.setLoading(false))
            ])
        case .minus:
            return Observable.concat([
                Observable.just(.setLoading(true)),
                Observable.just(.minusValue).delay(.seconds(1), scheduler: MainScheduler.instance),
                Observable.just(.setLoading(false))
            ])
        }
    }
    
    // reduce()는 방출된 Mutation 옵저버블 스트림을 받아서 상태값(State)을 뷰로 방출하는 Reactor의 내부 함수
    // 이전 상태 값과 처리 단위를 받아 결과를 반환함
    func reduce(state: State, mutation: Mutation) -> State {
        var newState = state
        
        switch mutation {
        case .plusValue:
            newState.value += 1
        case .minusValue:
            newState.value -= 1
        case .setLoading(let isLoading):
            newState.isLoading = isLoading
        }
        return newState
    }
}

 

CounterViewReactor는 Reactor라는 프로토콜을 채택해주고 있습니다.
Reactor를 채택하면 Action, Mutation, State를 필수적으로 정의(정형화된 구조로 구현) 해주어야하며 initialState가 필요합니다.

 

• Action: View로부터 받을 Action을 enum으로 정의
• Mutation: View로부터 action을 받은 경우, 처리해야 할 데이터들을 enum으로 정의
• State: 현재 상태를 가지고 있으며, View에서 해당 정보를 사용하여 UI 업데이트 

 

Reactor는 뷰에서 action이 들어오면 mutate()라는 리액터 내부 함수를 통해 Observable<Mutation> 타입을 반환하고, reduce()라는 내부 함수가 mutation과 현재 상태를 받아 바뀐 state 를 반환합니다.

• mutate(action:) -> Observable<Mutation> 
  : Action이 들어온 경우, 어떤 처리를 할것인지 Mutation에서 정의한 데이터 단위들을 사용하여 Observable로 방출
• reduce(state:mutation:) -> State
  : 현재 상태(state)와 작업 단위(mutation)을 받아서 최종 state를 반환. mutate(action:) -> Observable<Mutation>이 실행된 후 바로 해당 메소드 실행

 

View

Reactor에서 필요한 데이터 로직을 모두 처리했다면, 이를 이용해 뷰에서 UI를 업데이트해봅시다!

VC에서는 View라는 프로토콜을 채택해 구현해주어야 하는데요, 저는 코드로 구현했기 때문에 View를 채택해주었습니다.

storyboard를 이용해 UI를 구성한다면, StoryboardView를 채택해주면 됩니다.
(StoryboardView를 채택했을 경우에는 뷰가 로드가 된 후 바인딩을 해줍니다.)

 

import UIKit
import SnapKit
import Then
import RxSwift
import RxCocoa
import ReactorKit

class CounterVC: UIViewController {
  // UI 구성
}

// MARK: - bind
// 스보를 사용한다면 StoryboardView를 채택
// 둘의 차이는 StoryboardView를 채택했을 경우에는 뷰가 로드가 된 후 바인딩을 해준다는 것!
extension CounterVC: View {
    
    // 리액터가 주입되면 bind() 바로 실행
    func bind(reactor: CounterViewReactor) {
        bindAction(reactor)
        bindState(reactor)
    }
    
    private func bindAction(_ reactor: CounterViewReactor) {
        
        // 플러스 버튼
        plusBtn.rx.tap
            .map { Reactor.Action.plus }
            .bind(to: reactor.action)
            .disposed(by: disposeBag)
        
        // 마이너스 버튼
        minusBtn.rx.tap
            .map { Reactor.Action.minus }
            .bind(to: reactor.action)
            .disposed(by: disposeBag)
    }
    
    // Reactor의 state와 연결
    // reactor의 state를 bind해서 state가 변할때마다 바뀔 UI를 지정해주고 UI에서 변하게될 부분들을 여기서 지정해줌
    private func bindState(_ reactor: CounterViewReactor) {
        reactor.state.map { $0.value }
            .distinctUntilChanged()
            .map { "\($0)" }
            .bind(to: countLabel.rx.text)
            .disposed(by: disposeBag)
        
        reactor.state.map { $0.isLoading }
            .distinctUntilChanged()
            .bind(to: loadingView.rx.isAnimating)
            .disposed(by: disposeBag)
    }
}

 

사용자가 + 나 - 버튼을 클릭하면 이벤트가 발생되겠죠!

View는 이 action을 reactor에 넘기고, reactor의 state를 구독하고 있는 형태입니다.

이렇게 action을 방출하고 reactor가 처리한 데이터를 이용해 UI를 업데이트하는 과정은 bind(reactor: ) 메소드에서 모두 수행됩니다.

 

 

View에서는 ReactorKit 내부적으로 호출되는 bind(reactor: ) 메소드에서 바인딩을 수행합니다.

•  bindAction(_:): View에서 Reactor로 이벤트 방출
•  bindState(_:): Reactor에서 바뀐 state들을 구독해서 UI 업데이트

전체 코드: https://github.com/jane1choi/ReactorKit-Practice

GitHub - jane1choi/ReactorKit-Practice

느낀점

ReactorKit에서 필수적으로 구현해야 하는 것이 있다보니 정해준 템플릿을 따라 코드를 짜는 느낌이 들었습니다.

MVVM 구조를 처음 구성하다보면 ViewModel을 어떻게 구성해서 비즈니스 로직을 분리할지 막막할 수 있는데, ReactorKit의 가이드라인을 따라 비즈니스 로직과 뷰를 분리할 수 있어 MVVM 초심자가 시작해보기에 좋을 수 있을 것 같다는 생각이 드네요!

그리고 한 프로젝트에서 같은 방식으로 코드를 짤 수 있다보니 코드 리뷰 하기에도 편할 것 같습니다!

리액터킷으로 MVVM 아키텍처 적용 연습을 좀 해보고 비즈니스 로직 분리에 익숙해지면 리액터킷을 떼고 뷰모델을 만들어 MVVM 구조로 만드는 연습을 한번 해보도록 하겠습니다..

 

---

[참고 자료]

GitHub - ReactorKit/ReactorKit: A library for reactive and unidirectional Swift applications

[iOS - swift] 1. ReactorKit - 개념

[iOS] ReactorKit 알아보기