[RIBs] Interactor로 비니지스 로직 처리해보기 (feat. 초기세팅)

 

안녕하세요 Foma 👟 입니다!

 

저번 글에서 RIBs 에 대한 이론을 다뤘는데요.

 

(혹시 안보신 분들은 여기 에서 보고 와주세요~)

 

오늘은 Uber에서 직접 제공하는 튜토리얼을 한번 따라해보면서 구현해보려고 합니다!

 

바로 시작할게요~

---

 

프로젝트 생성

 

가장 먼저 RIBs 튜토리얼을 따라할 프로젝트를 생성해줘야겠죠?

 

저는 RIBs Example로 이름 짓겠습니다.

 

 

---

Pod init & install

 

저는 CocoaPod을 이용해서 RIBs를 설치하도록 하겠습니다.

 

터미널에서 프로젝트가 있는 경로로 이동해 pod init을 해주시면 pod file이 생길거에요.

 

팟파일에 아래 코드를 추가합니다. (버전은 바뀔 수 있으니 공식 깃헙에서 확인해주세요!)

pod 'RIBs', '~> 0.9'

 

추가한 다음 pod install을 해줘 RIBs를 설치해줍니다.

---

프레임워크 설치

 

RIBs는 자체 프레임워크를 Xcode안에서 사용할 수 있도록 만들어졌습니다.

 

RIBs 공식 깃헙으로 이동해주세요.

 

GitHub - uber/RIBs: Uber's cross-platform mobile architecture framework.

 

Download ZIP을 눌러서 다운받아 주세요.

 

 

터미널로 다시 이동해서 다운받으신 파일 중 RIBs-master/ios/tooling/install-xcode-template.sh를 드래그 해서 가져가줍니다.

 

 

이렇게 성공적으로 설치되었다면 success!가 뜰거에요.

 

---

Xcode

 

엑스코드 프로젝트를 실행해주시는데 주의할 점은 프로젝트명.xworkspace로 실행시켜줘야 합니다.

 

---

LoggedOut RIB

 

이제 RIB 프레임워크를 생성해볼까요?

 

새로운 파일 생성을 누르고 아래로 쭉 내리면 아래와 같이 RIB 파일들이 있을거에요.

 

 

Storyboard나 XIB를 만드실거면 아래에서 Adds XIB file or Adds Storyboard file을 눌러주세요.

 

(저는 스토리보드를 넣어줬습니다.)

 

이름은 LoggedOut으로 지어주세요 (튜토리얼에 그렇게 되어있음)

 

 

이렇게하면 Router,ViewController,Builder,Interactor,Storyboard 5개의 파일이 자동으로 만들어집니다.

 

 

가장 먼저 스토리보드로 이동해서 LoggedOut 레이아웃을 해주겠습니다.

 

플레이어1,플레이어2의 이름을 적을 텍스트필드 2개와 로그인 버튼 하나를 만들어줍니다.

 

 

뷰컨트롤러에 연결해주고 Login 버튼을 탭했을 때 액션도 연결해줍니다.

 

import RIBs
import RxSwift
import UIKit

protocol LoggedOutPresentableListener: AnyObject {
}

final class LoggedOutViewController: UIViewController, LoggedOutPresentable, LoggedOutViewControllable {
    
    @IBOutlet weak var player1NameTF: UITextField!
    @IBOutlet weak var player2NameTF: UITextField!
    @IBOutlet weak var loginButton: UIButton!

    weak var listener: LoggedOutPresentableListener?
    
    @IBAction func tapLoginButton(_ sender: Any) {
    }
}

 

위쪽에 LoggedOutPresentableListener 프로토콜이 있을거에요.

 

이 리스너는 뷰컨트롤러에서 일어난 이벤트를 처리할 로직 함수를 정의합니다.

 

로그인버튼을 눌렀을 때 비지니스 로직을 처리할 함수를 정의하겠습니다.

 

protocol LoggedOutPresentableListener: AnyObject {
    func handleLogin(player1Name:String,player2Name:String)
}

 

로그인 버튼을 눌렀을 때 리스너의 핸들로그인 함수를 실행해줍니다.

 

파라미터로는 플레이어1의 이름, 플레이어2의 이름을 넘겨주도록 합니다.

 

 @IBAction func tapLoginButton(_ sender: Any) {
        listener?.handleLogin(player1Name: player1NameTF.text ?? "", player2Name: player2NameTF.text ?? "")
    }

 

저번 글에 비지니스 로직을 처리하는 부분이 어디라고 했죠?

 

바로 인터랙터 입니다.

 

LoggedOutInteractor로 이동해줍니다.

 

인터랙터 끝 부분에 LoggedOutPresentableListener에서 정의한 함수를 구현해줍니다.

 

이렇게 함수 이름을 조금만 쳐도 자동 완성이 될거에요!

 

 

간단하게 플레이어1,플레이어2의 이름을 출력만 하는 로직을 작성하겠습니다.

 

final class LoggedOutInteractor: PresentableInteractor<LoggedOutPresentable>, LoggedOutInteractable, LoggedOutPresentableListener {

    weak var router: LoggedOutRouting?
    weak var listener: LoggedOutListener?

    ...
    
    func handleLogin(player1Name: String, player2Name: String) {
        print(player1Name,player2Name)
    }
}

 

 

이렇게 하고 실행을 누르면 까만 화면만 나올거에요.

 

왜냐하면 초기 화면을 정해주지 않았기 때문이죠.

---

 

RootRIB

 

초기RIB을 만들어줍니다.

 

이름은 Root로 할게요.

 

 

RootBuilder

 

Builder는 RIB을 생성해주는 역할을 합니다.

 

고로 RootBuilder에서 자식인 LoggedOutRIB을 생성해줘야 되겠죠?

 

build 메소드에 LoggedOut빌더를 생성해줍니다.

 

여기서 2가지 오류가 날거에요.

 

하나는 component에 대한 것인데 아직 RootComponent에 LoggedOutDependency를 주입해주지 않았기 때문이고,

 

하나는 RootRouter의 초기화에서 아직 LoggedOutBuilder를 구현하지 않았기 때문이에요.

 

func build() -> LaunchRouting {
           let viewController = RootViewController()
           let component = RootComponent(dependency: dependency,
                                         rootViewController: viewController)
           let interactor = RootInteractor(presenter: viewController)

           let loggedOutBuilder = LoggedOutBuilder(dependency: component)
        
           return RootRouter(interactor: interactor,
                             viewController: viewController,
                             loggedOutBuilder: loggedOutBuilder)
       }

 

RootComponent + LoggedOut

 

Component는 해당 RIB의 Dependency 관리하는 역할을 합니다.

 

아래와 같이 RootComponent에 LoggedOutDependency를 채택해줍니다.

 

import RIBs

protocol RootDependencyLoggedOut: Dependency {
}

extension RootComponent: LoggedOutDependency {
}

 

RootRouter

 

RootRouter에서 loggedOutBuilder를 초기화해줍니다.

 

final class RootRouter: LaunchRouter<RootInteractable, RootViewControllable>, RootRouting {
	
    private let loggedOutBuilder: LoggedOutBuildable
    
    init(interactor: RootInteractable,
         viewController: RootViewControllable,
         loggedOutBuilder: LoggedOutBuildable) {
        
        self.loggedOutBuilder = loggedOutBuilder
        
        super.init(interactor: interactor, viewController: viewController)
        interactor.router = self
    }

 

이 때 LoggedOutRIB에서 일어나는 이벤트를 감지하기 위해서 RootInteractable 프로토콜에 LoggedOutListener를 채택해줍니다.

 

protocol RootInteractable: Interactable, LoggedOutListener,LoggedInListener {
    var router: RootRouting? { get set }
    var listener: RootListener? { get set }
}

 

RootViewController

 

다만 RootRIB이라는 것을 알아챌 수 있게 레이블을 추가해줍니다.

 

let rootLabel:UILabel = UILabel()

 

레이아웃을 해주시고 

 

  func layout() {
        self.view.backgroundColor = .white
        
        rootLabel.text = "여기는 루트립입니다."
        view.addSubview(rootLabel)
        rootLabel.translatesAutoresizingMaskIntoConstraints = false
        rootLabel.centerXAnchor.constraint(equalTo:view.centerXAnchor)
                    .isActive = true
        rootLabel.centerYAnchor.constraint(equalTo:view.centerYAnchor)
                    .isActive = true
    }

 

뷰디드로드에 실행시켜줍니다.

 

 override func viewDidLoad() {
        super.viewDidLoad()
        layout()
    }

---

SceneDelegate

 

씬딜리게이트로 이동해서 RIBs를 import 해주고 window와 launchRouter를 만들어줍니다.

 

그 다음 scene 메소드에 아래와 같이 붙여넣어주세요.

 

(대충 RootBuilder로 초기를 설정한다는 내용같아요)

 

import UIKit
import RIBs

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?
    private var launchRouter: LaunchRouting?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        let window = UIWindow(windowScene: windowScene)
        self.window = window
        let launchRouter = RootBuilder(dependency: AppComponent()).build()
        self.launchRouter = launchRouter
        launchRouter.launchFromWindow(window)
    }
}

---

AppComponent

 

위 씬딜리게이트에서 AppComponent 부분에 에러가 날거에요.

 

앱컴포넌트 파일을 만들어줍니다.

 

import RIBs

class AppComponent: Component<EmptyDependency>, RootDependency {
    init() {
        super.init(dependency: EmptyComponent())
    }
}

---

이제 앱을 실행시켜보면?

 

아직도 검정화면 일거에요.. (후..튜토리얼 하기 힘드네..)

 

 

 

기존에 있던 ViewController와 Main.storyboard 파일을 지워버리고

 

Target - info로 이동해줍니다.

 

Application Scene Manifest - Scene Configuration - Application Session Role - Item 0 - Storyboard Name

 

을 지워주세요!

 

그리고 Main storyboard file base name이 있을거에요.

 

이것도 지워줍니다

 

 

그리고 실행해주시면 아래와 같이 LoggedOutViewController를 볼 수 있게 됩니다... 드디어...!

 

이제 플레이어1 이름과 플레이어2 이름을 적고 Login을 해주시면 

 

 

 

아래와 같이 플레이어1,플레이어2 이름이 출력되는 것을 볼 수 있습니다!!

 

---

이번 튜토리얼을 통해서 ViewController에서 일어난 이벤트들을 Listener로 감지하고 Interactor에 전달하여

 

Interactor에서 비지니스 로직을 처리하도록 했습니다.

 

처음 세팅하고 하는 거라 어려움이 많았지만 튜토리얼 하나를 끝내니 뿌듯하네요..

 

혹시라도 궁금하신 점이나 틀린 부분이 있다면 댓글로 알려주세요!