[CMC] ReactorKit 사용 전 스터디

CMC 4차 세션에서는 와이어 프레임과 간단한 기술 설계도를 발표를 하게됩니다.(3차는 해커톤으로 패스...)

개발자분들은 기술설계도 발표를 앞두고 개발환경 설정과 필요한 기술스택(or 도전해보고싶은?)을 정리해야할 것 같아요. 

처음엔 이 프로젝트에 RxSwift만 적용해보려고 했습니다.

감사하게도 같은 팀의 현직자이신 개발자께서 iOS 관련 조언을 해주셨는데 리액터킷에 대한 내용도 그중 하나였습니다.

CMC 첫 오티날 iOS개발자 네트워킹 시간에 처음 들어본 리액터킷...

RxSwift를 공부하느라고 그냥 그렇구나 언젠가 봐야지 하고 넘겼었는데요.
프로젝트 개발에 들어가기 전에 얼른 공부해야할 것 같아서 이렇게 정리해보고자 합니다.

 

(참고)

https://github.com/ReactorKit/ReactorKit

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

 

 

(참고)

https://www.youtube.com/watch?v=G1b1sBy8XBA 

 

 

위 영상은 김태준님의 reactorKit 관련 내용 발표영상입니다.

영상 초반엔 ReactorKit을 사용하기 전 RxSwift을 사용하며 느낄 수 있는 부분을 간략하게 말씀해주셨습니다.

저도 최근 Rx를 공부하면서 공감할 수 있었던 내용이었습니다.

• 핫한 RxSwift 쓰는 이유는?
  • 간결성
  • 강력한 비동기처리
  • 코드 가독성
  • 유행?
• RxSwift의 어려움?
  • 문법과 용어
  • 예제마다 다른 스타일(파편화)
• 결론 : 러닝커브가 높다.

이러한 이유와 함께 스스로 ReactorKit을 만나게 된 배경 및 개념을 설명해주십니다.

 

리액터킷 깃허브 문서를 참고해서 해석 후 알기쉽게 정리해보겠습니다.

reactorKit git readme

리액터 킷이란? 

단방향 데이터 흐름을 가진 반응형 앱을 위한 프레임워크라고 하네요.

리액터 킷은 Flux와 Reactive Programming 개념의 결합이라고 해요.

Flux가뭐지...

Facebook에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐.
단방향 데이터 흐름을 활용해 뷰 컴포넌트를 구성하는 React를 보완하는 역할

Reactive Programming은?

https://zeddios.tistory.com/303

왕초보를 위한 <Reactive programming이 뭔지 알기 전에>

 

사용자 Action과 뷰 State는 관찰 가능한 스트림을 통해 (단방향으로) 각 레이어로 전달됩니다.

 

목표

• 테스트 용이성
  • 뷰로부터 비즈니스 로직을 분리하는 것이 첫번째 목표
  • 리액터는 어떠한 의존성도 뷰에 갖지 않는다.
• 작은 부분으로 쉽게 시작
  • 전체 어플리케이션이 하나의 아키텍쳐를 따르도록 강제하지 않음.
  • 부분적으로 적용가능
• 적은 타이핑
  • 복잡한 코드를 피하는 것에 초점을 둠.
  • 리액터킷은 다른 아키텍쳐와 비교해서 적은 코드를 요구.

뷰

View는 MVC, MVVM 디자인 패턴을 공부하면서 봤던 View와 같아보이네요.

뷰는 데이터를 보여줍니다(ViewController, Cell)

뷰는 유저의 입력 -> action 스트림, 뷰 State -> UI 컴포넌트를 바인드 합니다.

위와 같은 의미로 뷰에는 비즈니스로직이 없으며 단지 action Stream, State Stream을 각각 매핑하여 보여줍니다.

 

뷰 사용법

위 사진의 코드를 보시면 View라는 이름의 프로토콜을 사용합니다.

그러면 해당 클래스는 자동적으로 reactor라는 프로퍼티를 가지게 된다고 해요.

 

위의 예제 코드에 대한 내용을 설명해드리면

reactor 프로퍼티가 바뀌었을때, bind(reactor:)가 호출됩니다.

이 메소드를 implement하여 action Stream, state Stream의 바인딩을 정의합니다.

 

Reactor란?

 

리액터는 처음 보여드린 도식화를 참고하면 알 수 있듯이 UI와 독립적인 레이어입니다.

리액터가 비즈니스로직을 담당합니다.

모든 뷰는 각각의 리액터를 가지고 있으며 그 리액터에 모든 로직을 위임합니다. MVVM의 뷰모델과 같은 역할을 하는 것 같네요. 

 

리액터 사용법

리액터 사용법

리액터는 Reactor 프로토콜을 통해 사용가능합니다.

이 프로토콜은 Action, Mutation, State를 정의해야하며 각각 처음상태인 initialState가 필요합니다.

이 세가지를 알아보겠습니다.

Action이란?

Action = 유저 상호작용 추상화 개념

State =  뷰 State 추상화 개념

Mutation = Action과 State의 다리 역할.

리액터는 Action Stream과 State Stream을 mutate(), reduce()를 통해 변환할 수 있습니다.

여기 있는 mutate와 reduce에 대해 알아보겠습니다.

mutate()는 Action 스트림을 받아서 Mutation 스트림을 제공하는 Observable을 생성합니다.

비동기 작업이나 API요청과 같은 side effect가 mutate에서 수행된다고 합니다.

 

reduce

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

 

참고한 블로그

https://medium.com/styleshare/reactorkit-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-c7b52fbb131a

ReactorKit 시작하기