[아키텍처] ReactorKit에 대해서(feat.Flux)

안녕하세요.

오늘은 ReactorKit에 대해서 정리해보려고 합니다.

 

ReactorKit?

ReactorKit의 깃허브에 들어가 보면 소개글의 첫 문장은 아래와 같습니다.

ReactorKit is a framework for a reactive and unidirectional Swift application architecture.
- ReactorKit은 반응형 및 단방향  애플리케이션 아키텍처를 위한 프레임워크입니다.

반응형이라는 단어만 봐도 Reactive Programming을 위한 프레임워크라는 걸 알 수 있습니다.

반면에 단방향이라는 말은 조금 어색하기도 하고 쉽게 뭔가를 떠올리기 어려웠던 것 같습니다.

해당 깃허브를 조금 더 들여다보면

ReactorKit은 Flux(단방향 흐름의 아키텍처) + Reactivex(반응형 프로그래밍)을 콘셉트로 한다는 부분이 있는 것을 확인할 수 있습니다.

단방향 흐름이 뭔지 이해할 필요가 있으니 Flux를 조금 알아보겠습니다.

Flux ?

위의 이미지에서 화살표 방향이 한 방향으로만 가리키고 있는 것을 볼 수 있습니다.

설명하자면

사용자의 입력을 기반으로 Action을 만들고(createAction) 이 Action을 Dispatcher에게 전달하여 Store(Model)의 데이터를 변경한 뒤에 View에 반영하게 되는 단방향의 흐름제어를 가지고 있는 아키텍처입니다.

단방향의 흐름제어를 가지고 있고 어떠한 방식으로 동작되는지 정도만 알면 될 것 같습니다. 

더 궁금하실 수 있으실 것 같아 공식문서 링크 남겨두겠습니다.

Flux | 사용자 인터페이스를 만들기 위한 어플리케이션 아키텍쳐

결과적으로 이러한 단방향의 흐름제어와 반응형 프로그래밍을 위한 라이브러리라고 생각하시면 될 것 같습니다.

 

ReactorKit에서 단방향 흐름은 아래의 이미지와 같습니다.

View를 통해 들어온 정보를 토대로 Action을 방출하고 이는 다시 Reactor의 mutate를 통해 상태 변경을 위한 작업을 수행하고 reduce를 통해 상태(State)가 변경되게 됩니다.

예를 들어 카운터 앱이 있다고 해봅시다.

View를 통해 버튼의 터치 이벤트가 들어왔고 미리 정의해 둔 Action에서 add를 방출하게 되면 Reactor에서 해당 Action에 대한 mutate, reduce를 순차적으로 진행해 State를 변경하게 됩니다. 변경된 State는 View에 다시 반영되게 되고요.

글로만 보면 어렵더라고요.

그래서 간단한 예제를 준비해 봤습니다.

 

예제

간단하게 TodoList를 불러오고 해당 TodoList에서 클릭 시 check 표시가 되는 앱을 예제로 들어보겠습니다.

전체 코드는 깃허브 링크를 참고해주세요.

GitHub - 9oHigh/usket.ReactorKit

 

1. 모델

struct TodoItem {
    let id: Int
    let title: String
    var isDone: Bool
}

- 테이블 뷰에 표시할 아이템을 정의합니다.

 

2. Reactor

import RxSwift
import ReactorKit

class TodoListReactor: Reactor {
    
    // View를 통해 들어오는 Action
    enum Action {
        case load
        case toggleItem(Int)
    }
    
    // Action을 통해 실질적으로 할 동작들
    enum Mutation {
        case setLoading(Bool)
        case setTodoList([TodoItem])
        case setError(Error)
        case toggleItem(Int)
    }
    
    // Mutation(실질적으로 할 동작)에 따라 상태를 변화
    struct State {
        var todoList: [TodoItem] = []
        var isLoading: Bool = false
        var error: Error?
    }
    
    // 반드시 초기 State가 있어야함
    // 생성자에서 받아도 상관없음
    let initialState = State()
    private let todoService: TodoService
    
    init(todoService: TodoService) {
        self.todoService = todoService
    }
    
    // 액션이 들어오면 호출
    func mutate(action: Action) -> Observable<Mutation> {
        switch action {
        case .load:
            return todoService.loadTodoList()
                .map { .setTodoList($0) }
                .startWith(.setLoading(true))
                .catch { .just(.setError($0)) }
        case .toggleItem(let id):
            return .just(.toggleItem(id))
        }
    }
    
    // mutate가 실행된 이후 상태를 변경
    func reduce(state: State, mutation: Mutation) -> State {
        var newState = state
        switch mutation {
        case .setLoading(let isLoading):
            newState.isLoading = isLoading
        case .setTodoList(let todoList):
            newState.todoList = todoList
            newState.isLoading = false
        case .setError(let error):
            newState.error = error
            newState.isLoading = false
        case .toggleItem(let id):
            if let index = newState.todoList.firstIndex(where: { $0.id == id }) {
                newState.todoList[index].isDone.toggle()
            }
        }
        return newState
    }
}

- Reactor 프로토콜에 정의되어 있는 Action, Mutation, State를 정의합니다.

참고로 저의 경우

Action -> Reacotr(mutate) -> Reactor(reduce) -> State의 흐름으로 이해하고 해당 예제를 작성했습니다.

만약 잘못된 것이라면 댓글 부탁드리겠습니다 🥲

 

3. TodoService

protocol TodoServiceType {
    func loadTodoList() -> Observable<[TodoItem]>
}

class TodoService: TodoServiceType {
    
    func loadTodoList() -> Observable<[TodoItem]> {
        let todoItems = [
            TodoItem(id: 1, title: "아침 먹기", isDone: false),
            TodoItem(id: 2, title: "점심 먹기", isDone: false),
            TodoItem(id: 3, title: "저녁 먹기", isDone: false)
        ]
        return Observable.just(todoItems).delay(.seconds(1), scheduler: MainScheduler.instance)
    }
}

실제로는 추가하거나 삭제하는 등의 작업도 있겠지만 간단한 예시를 만들기 위해 만들었습니다.

delay를 사용한 것은 State의 isLoading이 true인 경우, 인디케이터를 화면에 보여주는 로직이 있기 때문에 사용했습니다.

 

4. TodoViewController

viewDidAppear에서 reactor?.action.onNext(.load)를 통해 action이 load를 방출하게 되면

reactor의 mutate가 호출되고 다시 reduce가 호출되면서 화면에 리스트가 보이게 됩니다.

import UIKit
import ReactorKit
import RxSwift
import RxCocoa

class TodoViewController: UIViewController, View, UIScrollViewDelegate {
    
    private let tableView = UITableView()
    private let activityIndicator = UIActivityIndicatorView(style: .large)
    var disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        ...
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        // load 액션 방출
        self.reactor?.action.onNext(.load)
    }
    
    func bind(reactor: TodoListReactor) {
        // state가 변경될 때마다 todoList를 반영
        reactor.state
            .map { $0.todoList }
            .bind(to: tableView.rx.items (cellIdentifier: "TodoCell", cellType: TodoCell.self)) { row, item, cell in
                cell.configure(item: item)
            }
            .disposed(by: disposeBag)
        
        // state가 변경될 떄마다 state의 isLoading을 확인하고 indicator에 반영
        reactor.state.map { $0.isLoading }
            .distinctUntilChanged()
            .subscribe(onNext: { [weak self] isLoading in
                if isLoading {
                    self?.activityIndicator.startAnimating()
                } else {
                    self?.activityIndicator.stopAnimating()
                }
            })
            .disposed(by: disposeBag)
            
        // 셀 클릭시 toggleItem 액션을 reactor 액션에 바인딩
        tableView.rx.modelSelected(TodoItem.self)
            .map { .toggleItem($0.id) }
            .bind(to: reactor.action)
            .disposed(by: disposeBag)
        
        reactor.state.map { $0.error }
            .compactMap { $0 }
            .subscribe({ [weak self] error in
                let alertViewController = UIAlertController(title: "경고", message: "알 수 없는 오류가 발생했습니다.", preferredStyle: UIAlertController.Style.alert)
                
                let alertAction = UIAlertAction(title: "오키", style: UIAlertAction.Style.default) { action in
                    alertViewController.dismiss(animated: true)
                }

                alertViewController.addAction(alertAction)
                self?.present(alertViewController, animated: true)
            })
            .disposed(by: disposeBag)
        
        tableView.rx.setDelegate(self)
            .disposed(by: disposeBag)
    }
    
    ...
}

 

 

---

 

비록 간단한 앱이지만

사용하다 보니 조금 더 복잡한 앱이라도 크게 어렵지 않을 것 같다는 느낌을 받았습니다.

ReactorKit으로 조그마한 프로젝트를 한 번 해봐야겠네요.

 

아무쪼록 도움이 되시면 좋겠습니다.

그럼 이만 👋🏻 👋🏻 👋🏻