[iOS] ReactorKit 들여다보기

1. Reactorkit 소개

Reactorkit은 Swift로 작성된 리액티브 프로그래밍 라이브러리로, 주로 상태 관리와 데이터 흐름 제어를 쉽게 하기 위해 사용됩니다. 이 라이브러리는 iOS 앱 개발에서 리액티브 패턴을 채택하여 일관된 상태 관리와 반응형 UI 업데이트를 가능하게 합니다.

이번 글에서는 Reactorkit의 기본 개념과 작동 방식, 어떤 장점이 있는지 리드미를 번역해보며 소개해드리려고 합니다.

 

2. Reactorkit의 기본 개념

Reactorkit의 정의

 

ReactorKit은 Flux와 Reactive 프로그래밍의 조합이라고 합니다. 사용자액션과 뷰의 상태는 관찰 가능한 스트림을 통해 각 레이어에 전달됩니다. 이 스트림은 단방향으로 이루어져 있습니다. 뷰는 액션만 내보낼 수 있고, 리액터는 상태만 내보낼 수 있는 것 처럼 말입니다!

 

 

Reactorkit의 작동 방식

작동 방식을 가볍게! 아주 가볍게 이해해볼까요?!

이전에 작성한 바와 같이 Reactorkit은 단방향 데이터 흐름을 따릅니다.

1) 사용자의 Action이 발생하면, 이 액션은 Reactor로 전달됩니다.

2) Reactor는 action에 대한 State를 반환하고,

3) 이 State가 View에 반영되어 UI가 업데이트됩니다.

 

Reactorkit의 디자인 목표

Reactorkit의 디자인 목표는 다음과 같다고 기술되어 있습니다.

• 테스트 가능성 : ReactorKit의 첫 번째 목적은 비즈니스 로직을 뷰에서 분리하는 것입니다. 이렇게 하면 코드를 테스트 가능하게 만들 수 있습니다. 리액터는 뷰에 대한 종속성이 없습니다. 따라서 리액터를 테스트하고 뷰 바인딩을 테스트하면 됩니다.
• 소규모로 시작 가능 : ReactorKit은 전체 애플리케이션이 단일 아키텍처를 따를 필요가 없습니다. ReactorKit은 특정 뷰에 대해 부분적으로 채택될 수 있습니다. 기존 프로젝트에서 ReactorKit을 사용하기 위해 모든 것을 다시 작성할 필요가 없습니다.
• 간결한 코드 : ReactorKit은 간단한 작업을 위해 복잡한 코드를 작성하는 것을 피하는 데 중점을 둡니다. ReactorKit은 다른 아키텍처에 비해 더 적은 코드가 필요합니다. 따라서 간단하게 시작하고 확장해볼 수 있습니다.

 

 

3. Reactorkit의 구성

1) View

View는 data를 보여주는 역할을 담당합니다. 뷰 컨트롤러와 셀은 뷰로 처리됩니다. 뷰는 사용자 입력을 작업 스트림에 바인딩하고 뷰 상태를 각 UI 컴포넌트에 바인딩합니다. 뷰 레이어에는 비즈니스 로직이 없습니다. 뷰는 단지 액션 스트림과 상태 스트림을 매핑하는 방법을 정의합니다.

 

뷰를 정의하려면 기존 클래스가 View라는 프로토콜을 따르도록 하면 됩니다. 그러면 클래스는 자동으로 reactor라고 이름이 지정된 프로퍼티를 가지게 됩니다. 이 프로퍼티는 일반적으로 뷰 외부에서 주입합니다.

class ProfileViewController: UIViewController, View {
  var disposeBag = DisposeBag()
}

profileViewController.reactor = UserViewReactor() // reactor 주입

 

 

reactor 프로퍼티가 변경되면 bind(reactor:)가 호출됩니다. 작업 스트림과 상태 스트림의 바인딩을 정의하기 위해 아래의 메서드를 구현하세요.

func bind(reactor: ProfileViewReactor) {
  // action (View -> Reactor)
  refreshButton.rx.tap.map { Reactor.Action.refresh }
    .bind(to: reactor.action)
    .disposed(by: self.disposeBag)

  // state (Reactor -> View)
  reactor.state.map { $0.isFollowing }
    .bind(to: followButton.rx.isSelected)
    .disposed(by: self.disposeBag)
}

 

2) Reactor

Reactor는 뷰의 상태를 관리하는 UI 독립적인 레이어입니다. Reactor의 가장 중요한 역할은 뷰로부터 제어 흐름을 분리하는 것입니다. 모든 뷰는 해당 뷰에 대응하는 Reactor를 가지고 있으며, 모든 로직을 해당 Reactor에 위임합니다.

Reactor는 뷰에 대한 의존성이 없기 때문에 쉽게 테스트할 수 있습니다.

 

Reactor를 정의하려면 Reactor 프로토콜을 준수해야 합니다. 이 프로토콜은 세 가지 타입(Action, Mutation, State)을 정의할 것을 요구하며, initialState라는 속성을 필요로 합니다.

Action은 사용자 상호작용을 나타내고, State는 뷰 상태를 나타냅니다. Mutation은 Action과 State 사이의 다리 역할을 합니다. Reactor의 내부에서는 액션 스트림을 상태 스트림으로 변환하는 두 단계, 즉 mutate()와 reduce()를 통해 이를 수행합니다.

class ProfileViewReactor: Reactor {
  // Action: 유저의 액션을 표현
  enum Action {
    case refreshFollowingStatus(Int)
    case follow(Int)
  }

  // Mutation: 상태 변화를 표현
  enum Mutation {
    case setFollowing(Bool)
  }

  // State: 현재 뷰 상태를 표현
  struct State {
    var isFollowing: Bool = false
  }

  // 초기 상태 지정
  let initialState: State = State()
}

 

 

 

 

3) Reactor - mutate()

mutate()는 Action을 받아서 Observable<Mutation>을 반환합니다.

func mutate(action: Action) -> Observable<Mutation>

 

 

 

비동기 작업이나 API 호출같은 side effect들은 아래의 메서드에서 수행됩니다.

func mutate(action: Action) -> Observable<Mutation> {
  switch action {
  case let .refreshFollowingStatus(userID): // receive an action
    return UserAPI.isFollowing(userID) // create an API stream
      .map { (isFollowing: Bool) -> Mutation in
        return Mutation.setFollowing(isFollowing) // convert to Mutation stream
      }

  case let .follow(userID):
    return UserAPI.follow()
      .map { _ -> Mutation in
        return Mutation.setFollowing(true)
      }
  }
}

 

 

4) Reactor - reduce()

reduce()는 State와 Mutation으로부터 새로운 State를 반환합니다.

func reduce(state: State, mutation: Mutation) -> State

 

 

reduce() 메서드는 순수 함수입니다. 따라서 메서드 내부에서는 오직 새로운 State를 동기적으로 반환하는 작업만 수행해야 합니다. 이 함수 내에서는 side effects를 수행하지 않아야 합니다.

func reduce(state: State, mutation: Mutation) -> State {
  var state = state // create a copy of the old state
  switch mutation {
  case let .setFollowing(isFollowing):
    state.isFollowing = isFollowing // manipulate the state, creating a new state
    return state // return the new state
  }
}

 

5) Reactor - transform()

transform()는 각 스트림을 변환하며, 세가지의 메서드가 있습니다.

func transform(action: Observable<Action>) -> Observable<Action>
func transform(mutation: Observable<Mutation>) -> Observable<Mutation>
func transform(state: Observable<State>) -> Observable<State>

 

 

이 메서드들을 구현하여 다른 Observable 스트림과 변환하거나 결합할 수 있습니다.

더욱 자세한 내용은 Global States을 참고해주세요!

 

 

4. Reactorkit의 장점

Reactorkit의 장점은 아래와 같이 Reactorkit이 디자인된 목적에서부터 확장된다고 생각합니다.

- 일관된 상태 관리: 모든 상태 변화가 정의되어있어 예측 가능성이 높습니다.
- 테스트 용이성: 뷰와 로직이 분리되어있어 상태 변화와 액션을 테스트하기 쉽습니다.
- 확장성 및 유지보수 용이성: 모듈화된 구조 덕분에 확장과 유지보수에 용이합니다.

 

5. 마무리

지금까지 Reactorkit을 가볍게 알아보았습니다. 종종 회사의 우대사항에서 접해볼 수 있었던 이 라이브러리를 살펴보니, 한국 개발자분들이 만든 라이브러리라는 점이 참 인상적이었습니다 🙈

 

해당 글을 통해 Reactorkit을 이해하는데 도움이 되셨길 바라며, 다음에는 리드미의 예시에 있는 ToDoList 앱 개발에서 활용해보고 다시 돌아오겠습니다. 🐣

 

 

https://github.com/ReactorKit/ReactorKit?tab=readme-ov-file