[Design Pattern] ReactorKit이란?

 

안녕하세요 Foma 👟 입니다!

오늘은 RxSwift와 MVVM 디자인 패턴을 사용할때 아주 유용하게 쓰이는 ReactorKit에 대해서 정리하려고 합니다!

바로 시작할게요~

---

ReactorKit이란?

ReactorKit 공식 깃허브에서는 이렇게 소개하고 있습니다.

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

간단하게 설명드리면 ReactorKit은 아래와 같이 Reactor와 View를 연결해주는데

연결하는 방식을 Action과 State로 나눈 것입니다.

ViewModel 역할을 Reactor가 하는데 이 ViewModel에서 일어나는 반응형 이벤트들을 액션과 상태로 나눈 것이죠!

---

ReactorKit을 쓰면 뭐가 좋은데?

1. 테스트하기 쉽다.

뷰에서 비지니스 로직을 분리해내 리액터는 뷰에 대한 종속성이 없어집니다.

고로 리액터와 뷰를 바인딩하는 하는 코드만 테스트하면 되고 테스트하기가 훨씬 수월해집니다.

2. 부분적으로 시작할 수 있다.

리액터 킷은 "전체적인 디자인 패턴을 이 리액터킷으로 해!!!" 가 아니라

"너 사용하고싶은 곳에만 부분적으로 사용해도 돼" 라고 하고 있습니다.

고로 리액터킷을 사용하기 위해서 모든 코드를 다시 작성할 필요는 없다는 것이죠.

3. 코드가 간결해진다.

리액터킷은 단순한 일을 위해 복잡한 코드를 피하는 것이 자신들의 핵심이라고 합니다.

실제로 다른 아키텍쳐에 비해 훨씬 적은 코드가 사용됩니다.

---

Example

리액터킷에 나와있는 공식 예제를 통해서 본격적으로 이해해도록 합시다!

간단하게 구조를 설명드리면 화면을 띄우는 뷰(뷰컨트롤러)와 그 화면에 대한 비지니스를 로직을 작성할

리액터가 존재합니다.

---

Pod

팟 파일에 아래와 같이 ReactorKit과 RxCocoa를 추가해주고 pod install을 해줍니다.

 

pod 'ReactorKit' 

pod 'RxCocoa'

---

Storyboard

뷰는 플러스 버튼과 마이너스 버튼 숫자를 띄울 레이블 로딩을 보여줄 인디케이터가 있습니다.

 

---

CounterViewController

먼저 필요한 프레임워크들을 import 해줍니다.

 

import UIKit 
import ReactorKit 
import RxCocoa

스토리보드와 뷰컨트롤러를 연결해줍니다.

 

 @IBOutlet weak var loadingIndicator: UIActivityIndicatorView! 
 @IBOutlet weak var plusButton: UIButton! 
 @IBOutlet weak var numberLabel: UILabel! 
 @IBOutlet weak var minusButton: UIButton!

---

CounterReactor

이제 본격적으로 리액터킷의 핵심이 리액터를 만들어봅시다.

가장 먼저 ReactorKit을 import 해주고 Reactor를 채택해줍니다.

 

import ReactorKit 

class CounterViewReactor:Reactor { ...

가장 먼저 액션부터 enum으로 선언해줍니다.

Action은 뷰에서 쓰이는 액션들을 나열해주면 돼요.

우리는 +버튼과 -버튼이 있으니 +버튼을 누르는 액션 -버튼을 누르는 액션을 만들어주는 것이죠.

 

 //유저에게 받은 액션 
 enum Action { 
 	case plus 
 	case minus 
  }

액션을 받아서 어떠한 변화가 일어나는지도 enum으로 선언해줍니다.

액션에 따라서 값을 증가 시키는 것과 값을 감소 시키는 것 그리고 로딩을 어떻게 나타낼건지에 대한

변화들을 나열해주는 것입니다.

 

 //액션을 받은 어떠한 변화 
 enum Mutation { 
 case increaseValue 
 case decreaseValue 
 case setLoading(Bool) 
}

이제 변화들에 대한 값을 저장할 상태가 있어야겠죠?

더하거나 뺐을 때의 상태를 저장할 number와 그 사이에 로딩을 보여줄 로딩의 상태를 만들어줍니다.

 

 //어떠한 변화를 받은 상태 
 struct State { 
 var number:Int 
 var isLoading:Bool
 }

이제부터는 메소드들을 만들어줄건데요.

액션을 받았을 때 변화를 실행할 mutate 입니다. (Action -> Mutation)

아래를 보면 각 액션에 따라 적합한 뮤테이션 이벤트들이 발생됩니다.

 

 //액션에 맞게 변화해 
 func mutate(action:Action) -> Observable<Mutation> {
 	switch action { 
    	case .plus: 
        	return Observable.concat([
            	Observable.just(Mutation.setLoading(true)),
                Observable.just(Mutation.increaseValue).delay(.milliseconds(500), scheduler: MainScheduler.instance),
                Observable.just(Mutation.setLoading(false)) 
                ]) 
        case .minus: 
        	return Observable.concat([
            	Observable.just(Mutation.setLoading(true)),
            	Observable.just(Mutation.decreaseValue).delay(.milliseconds(500), scheduler: MainScheduler.instance),
            	Observable.just(Mutation.setLoading(false)) 
            	]) 
        	} 
 	}

위 mutate에서 발생한 이벤트들을 받아서 값의 상태를 변화시켜줄 reduce 입니다. (Mutation -> State)

변화된 이벤트들에 따라서 값을 적합하게 바꿔줍니다.

 

 //변화에 맞게 값이 설정해 
 func reduce(state: State, mutation: Mutation) -> State {
 	var state = state 
    switch mutation { 
    	case .increaseValue:
        	state.number += 1 
        case .decreaseValue: 
        	state.number -= 1 
        case let .setLoading(isLoading):
        	state.isLoading = isLoading 
         } 
         	return state
     }

---

CounterViewController

이제 뷰와 리액터를 연결해주어야겠죠?

가장 먼저 디스포즈백과 위에서 만들어준 CounterViewReactor를 만들어줍니다.

 

 let disposeBag:DisposeBag = DisposeBag()
 let counterViewReactor:CounterViewReactor = CounterViewReactor()

이제 리액터를 파라미터로 받는 bind 메소드를 만들어줍니다.

 

func bind(reator:CounterViewReactor) {...}

bind 메소드 안에 각 버튼과 리액터의 액션을 바인딩해줍니다.

 

 //+버튼과 reactor의 action을 바인딩 
 plusButton
    .rx 
    .tap 
    .map{CounterViewReactor.Action.plus} 
    .bind(to: reator.action) 
    .disposed(by: disposeBag)
    
//-버튼과 reactor의 action을 바인딩 
 minusButton
    .rx 
    .tap 
    .map{CounterViewReactor.Action.minus} 
    .bind(to: reator.action) 
    .disposed(by: disposeBag)

bind 메소드 안에 리액터의 상태값과 뷰의 숫자를 나타낼 레이블과 로딩 인디케이터를 바인딩해줍니다.

 

 //reacotor의 value와 numberLabel을 바인딩 
 reator.state 
    .map {"\($0.number)"} 
    .distinctUntilChanged() 
    .bind(to: numberLabel.rx.text) 
    .disposed(by: disposeBag) 
    
 //reactor의 isLoading과 loadingIndicator를 애니메이션 할지 말지 바인딩 
  reator.state 
    .map{$0.isLoading} 
    .distinctUntilChanged() 
    .bind(to: loadingIndicator.rx.isAnimating) 
    .disposed(by: disposeBag)
 
 //reactor의 isLoading과 loadingIndicator를 숨길지 말지 바인딩 
 reator.state 
    .map{!$0.isLoading} 
    .distinctUntilChanged() 
    .bind(to: loadingIndicator.rx.isHidden) 
    .disposed(by: disposeBag)

bind(reator:) 메소드에 맨 처음 만들어준 counterViewReactor를 파라미터로 넣고 실행시켜줍니다.

 

 override func viewDidLoad() {
 	super.viewDidLoad() 
    	bind(reator: counterViewReactor)
  }

 

---

실행화면

아래와 같이 버튼이 눌리는 액션에 따라서 값이 변화하게 되고

변화한 값은 레이블과 로딩인디케이터에 적용되는 모습을 볼 수 있습니다.

 

---

Source Code

전체 소스 코드는 아래 깃헙으로 가서 참고해주세요!

 

fomagran/ReactorKit-Example