[iOS] - ReactorKit의 View와 Reactor

sun02·2022년 10월 16일
0

ReactorKit

목록 보기
2/2

ReactorKit의 View와 Reactor에 대해서 ReactorKit 깃허브에 작성된 예시를 기반으로 정리해보도록 한다.

View

먼저 View는 데이터를 보여주는 화면으로
여기서 UIView가 아니라 ViewController와 Cell이 View로 취급된다.

View는
사용자의 인풋(Action)을 action stream과 연결(bind)하고
상태(State)를 각 UI 컴포넌트들과 연결(bind)한다.

여기서 연결은 어려운 의미가 아니라 아래에서 나올 'bind(reactor:)'매서드를 통해

  • View는 Action을 Reactor에 전달하고 (View -- Action --> Reactor)
  • Reactor는 State를 View로 전달한다 (Reactor -- State --> View)

는 것을 의미한다.

- View 정의하기

View로 사용될 클래스를 정의하기 위해서 'View'라는 프로토콜을 추가한다.

class ProfileViewController: UIViewController, View {
  var disposeBag = DisposeBag()
}
  • 이때 만약 해당 ViewController가 스토리보드로 개발되었다면 'StoryBoardView' 프로토콜을 추가한다.

그리고 해당 View 밖에서 View의 Reactor를 주입한다.

ProfileViewcontroller.reactor = ProfileViewReactor()
  • 나는 보통 화면전환을 위해 해당 view를 생성할 때 reactor 주입을 해주었다.

- bind(reactor: ) 작성하기

View 안의 bind 매서드에 View가 연결(bind)하는 action과 state를 정의한다.

func bind(reactor: ProfileViewReactor()) {
	// View -> Reactor : Action
    
    // Reactor -> View : State
}

이 bind(reactor: ) 매서드는

View 프로토콜이 채택된 경우 reactor가 주입되었을 때 호출되고,
StoryBoardView 프로토콜이 채택된 경우 View가 Load 될 때 호출된다.

Reactor

Reactor는 UI와 독립적인 계층으로 View의 State를 관리한다.
Reactor의 가장 중요한 역할은 control flow를 View에서 분리하는 것이다.
모든 View는 각자의 Reactor를 가지고 자신의 모든 로직을 reactor에 위임(delegate)한다.

- Reactor 정의하기

Reactor로 사용될 클래스를 정의하기 위해서 'Reactor'라는 프로토콜을 추가한다.

이 프로토콜은 Action, Mutation, State 타입과 initialState 프로퍼티의 정의를 요구한다.

class ProfileViewReactor: Reactor {

	let initialState: State = State()
    
    // 사용자의 액션
	enum Action {
    }
    
    // 상태의 변화
    enum Mutation {
    }
    
    // 현재 View의 상태
    struct State {
    }
}
  • Action에는 사용자의 액션들을 나타내고, State에는 현재 View의 상태를 나타낸다.
    • Mutation 은 Action과 State의 중간 브릿지 역할을 한다.

View에서 Reactor로 전달할 사용자의 인풋(Action) case들을 Action에 정의하고,
Reactor에서 View로 전달하는 View의 State 프로퍼티들이 State 구조체에 정의된다.

- Mutate() & Reduce()

이렇게 Action을 받아 State로 전환하기 위해서 Reactor는 두 가지 단계를 거치는 데 바로 Mutate()reduce() 이다.

- Mutate()

mutate() 는 Action을 받아 Observable로 만들어주는 매서드로 비동기적인 작업이나, API 호출 같은 모든 부작용들이 여기서 발생한다.

- Reduce()

reduce()는 state와 Mutation을 통해 새로운 State를 만들어주는 매서드이다. 여기서는 새로운 State를 동기적으로 반환하기 때문에 어떠한 부작용도 발생하지 않는다.

출처

0개의 댓글