[iOS] Coordinator (2) - 코디네이터 패턴, 예제와 함께 구현하기

✔️ 이 글의 시리즈는 아래의 세 문서를 참고해 작성되었습니다.

Coordinator Pattern

How to use the coordinator pattern in iOS apps

Advanced coordinators in iOS

✔️ 아래의 두 문서는 조악하게나마 번역을 해 두었으니 혹시 필요하신 분 참고하세요.

• How to use the coordinator pattern in iOS apps 해석 및 정리
• Advanced coordinators in iOS 해석 및 정리

✔️ 이전 편인 (1) - 코디네이터 개념 이해하기는 여기에 있습니다.

✔️ 노션이 더 편하시다면 여기의 1,2편 통합본 를 확인해 주세요.

---

Coordinator 구현

이제 설명은 마치고 실제 코드를 보며 구현해 봅시다.

예제 프로젝트인 CoordinatorPractice는 다음과 같이 동작합니다.

CoordinatorPractice의 구조는 다음과 같습니다.

1. Coordinator 프로토콜 만들기

가장 먼저, 부모 코디네이터(AppCoordinator)와 자식 코디네이터가 준수할 프로토콜을 만듭니다.

Coordinator 프로토콜

import UIKit

protocol Coordinator: AnyObject {
    var childCoordinators: [Coordinator] { get set }
    var navigationController: UINavigationController { get set }

    func start()
}

• childCoordinators : 자식 코디네이터를 저장
  • 모든 코디네이터는 자신의 자식 코디네이터를 관리합니다.
• navigationController : 뷰컨트롤러를 보여줄 때 사용될 내비게이션 컨트롤러를 저장.
  • ☑️ 내비게이션 바를 표시하지 않더라도, 내비게이션 컨트롤러를 사용하는 것이 뷰 컨트롤러를 보여주는 가장 쉬운 방법이다.
• start(): 해당 코디네이터가 제어권을 갖도록 하는 메서드. 완전히 만들고 준비되었을 때만 코디네이터를 활성화함.
• AnyObject : 클래스에서만 사용 가능한 프로토콜임을 명시

2. AppCoordinator(부모 코디네이터) 만들기

AppCoordinator는 부모 코디네이터로,

앱 실행과 동시에 앱에 대한 제어권을 갖는 첫 번째 코디네이터이다.

자식 코디네이터까지 있는 경우, AppCoordinator라고 이름짓기도 한다.

AppCoordinator

import Foundation
import UIKit

class AppCoordinator: NSObject, Coordinator, UINavigationControllerDelegate {

    var childCoordinators: [Coordinator] = [] // child coordinator가 할당 해제되는것을 방지하기 위해 사용
    var navigationController: UINavigationController

    init(navigationController: UINavigationController) {
        self.navigationController = navigationController
    }

    func start() {
        navigationController.delegate = self
        showLoginViewController()
    }

    private func showHomeViewController() {
        // 자식 코디네이터를 만들고 제어권을 갖게 함(start 호출)
        let child = HomeCoordinator(navigationController: navigationController)
        childCoordinators.append(child)
        child.start()
        child.parentCoordinator = self
    }

    private func showLoginViewController() {
        // 자식 코디네이터를 만들고 제어권을 갖게 함(start 호출)
        let child = LoginCoordinator(navigationController: navigationController)
        childCoordinators.append(child)
        child.start()
        child.parentCoordinator = self
    }

    func didLoggedIn() {
        navigationController.popViewController(animated: true)
        showHomeViewController()
        print("로그인 -> 홈")
    }

    func didLoggedOut() {
        navigationController.popViewController(animated: true)
        print("홈 -> 로그인")
    }

}

• 해당 코디네이터가 다른 뷰컨들에 의해 공유될 것이기 때문에, struct보다 class로 선언
• Coordinator 프로토콜을 준수
• start() : ViewController 클래스의 인스턴스를 생성하고, navigationController에 push한다.
• didLoggedIn(), didLoggedOut() : 자식 코디네이터들이 화면 전환을 위해 AppCoordinator로부터 호출하는 메서드입니다.
  • 화면 전환 요청을 받으면 전환할 화면을 담당하는 자식 코디네이터들을 먼저 생성하고, 그 자식 코디네이터를 실행시킵니다 - showHomeViewController(), showLoginViewController() 참조

❓ AppCoordinator가 왜 NSObject를 상속하고 UINavigationControllerDelegate를 준수하나요?

❗️ 이 부분은 조금 어려운데, 바로 아래 단락에 나누어 설명해 두었습니다.

3. AppCoordinator에 UINavigationControllerDelegate 채택 후 didShow() 메서드 구현하기

이 작업은 AppCoordinator가 내비게이션 컨트롤러와의 상호작용을 직접적으로 감지하도록 하는 작업입니다.

AppCoordinator의 위 코드에 아래 메서드들을 추가해야 합니다.

❓ 왜 이 작업을 하나요?

❗️ “내비게이션 컨트롤러로부터 뒤로 이동하는 것을 AppCoordinator가 처리해 주기 위해서입니다”

• 내비게이션 바에서 뒤로 버튼을 누르면 뷰 컨트롤러가 pop됩니다.
• 뷰 컨트롤러가 사라지면 그 뷰 컨트롤러를 관리하던 자식 코디네이터도 더 이상 필요가 없으므로, childCoordinators 에서 지워 주어야 합니다.
• 하지만 뒤로 가는 작업은 Coordinator에 의해 발동되지 않으므로 처리가 까다롭습니다.

❗️ 다행히 UINavigationControllerDelegate 프로토콜로 이러한 이벤트를 깔끔하게 모니터링 할 수 있습니다.

• 그럼 내비게이션 컨트롤러에서 직전 화면이 뭐였는지 어떻게 알 수 있나요??
  • 그걸 알기 위해 1. UINavigationControllerDelegate 를 채택해 2. 아래의 navigationController(_ navigationController: UINavigationController, didShow viewController: UIViewController, animated: Bool) 메서드를 사용합니다 - 공식문서
  • 이 메서드는 내비게이션 컨트롤러가 뷰 컨트롤러의 뷰와 내비게이션 아이템 프로퍼티를 표시한 “이후”에 대리자(delegate)에게 알리는 메서드입니다.
  • 화면전환이 있었다면, push든 pop이든 관계없이 화면 전환 이후에 이 메서드가 호출됩니다.
• NSObject 를 상속하는 이유는, 이를 상속해야만 UINavigationControllerDelegate 프로토콜을 채택할 수 있기 때문입니다.

이제 뷰 컨트롤러가 보여질 때마다 내비게이션 컨트롤러가 AppCoordinator에게 알려 줄 것입니다!

// AppCoordinator.swift

    func navigationController(_ navigationController: UINavigationController, didShow viewController: UIViewController, animated: Bool) {

        print("viewControllers : \(navigationController.viewControllers)")
        print("childCoordinators : \(childCoordinators)")

        // 어떤 뷰컨트롤러로부터 이동해 왔는지 조회
        guard let fromViewController = navigationController.transitionCoordinator?.viewController(forKey: .from) else {
            return
        }

        // 해당 뷰컨트롤러가 뷰컨트롤러 배열에 존재하는지 확인. 만약 존재한다면, pop이 아닌 push를 한 것이므로 따로 처리할 작업은 없다.
        if navigationController.viewControllers.contains(fromViewController) {
            return
        }

        // 여기까지 도달했다면 해당 뷰컨트롤러가 뷰컨트롤러 배열에 존재하지 않는다는 것이며, 이는 pop이 되었음을 의미한다.
        // 따라서 어떤 뷰 컨트롤러가 pop되었는지 확인 후, 그 뷰컨트롤러를 관리하던 자식 코디네이터를 childCoordinators로부터 지워 주어야 한다.
        if let homeViewController = fromViewController as? HomeViewController {
            print("HomeVC의 코디네이터 삭제")
            childDidFinish(homeViewController.coordinator)
        }
        if let loginViewController = fromViewController as? LoginViewController {
            print("LoginVC의 코디네이터 삭제")
            childDidFinish(loginViewController.coordinator)
        }
        print("viewControllers : \(navigationController.viewControllers)")
        print("childCoordinators : \(childCoordinators)")
    }

    func childDidFinish(_ child: Coordinator?) {
        for (index, coordinator) in childCoordinators.enumerated() {
            if coordinator === child {
                childCoordinators.remove(at: index)
                print("\(child) 삭제함")
                break
            }
        }
    }

func navigationController - didShow()

• 이전에 어떤 뷰컨으로부터 이동하는지 읽어낸다
• 이전 뷰컨이 아직 navigationStack에 존재한다면 : pop이 아닌 push동작으로 인식된 것임
  • 아무 조치도 할 필요 없다 (return)
• 이전 뷰컨이 navigationStack에 존재하지 않는다면 : pop된 것이 맞음
  • pop된 뷰컨의 coordinator를 읽어와서 childCoordinators에서 삭제해 줘야 함
• 따라서 push였다면 자식 코디네이터를 처리할 필요가 없지만, pop이었다면 자식 코디네이터를 처리해 주어야 합니다. (아래 코드 참고)
• if let … 으로 시작하는 코드는 뷰 컨트롤러 하나가 추가될 때마다 반복됩니다.
  • 이를 해결하는 방법은 별도의 게시물 에 정리해 두었습니다.

func childDidFinish(_ child: Coordinator?)

• AppCoordinator의 childCoordinators 목록에서 코디네이터를 찾아 삭제하는 역할을 하는 메서드입니다.

4. AppDelegate에 AppCoordinator 추가하기

앱이 시작할 때 AppCoordinator를 사용할 수 있도록 코드를 추가한다.

AppDelegate

import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?
    var coordinator: AppCoordinator?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.

        // 앱에서 사용될 메인 내비게이션 컨트롤러 생성
        let navigationController = UINavigationController()

        // 앱 코디네이터에 네비게이션 컨트롤러를 넣음 - 뷰 컨트롤러를 보여주기 위해
        coordinator = AppCoordinator(navigationController: navigationController)

        // 코디네이터가 제어권을 갖도록 지시
        coordinator?.start()

        // 기본 UIWindow를 만들고 활성화하기
        window = UIWindow(frame: UIScreen.main.bounds)
        window?.rootViewController = navigationController
        window?.makeKeyAndVisible()

        return true
    }
}

• var coordinator: AppCoordinator?
  • 앱의 부모 코디네이터를 저장해 메모리에서 해제되는 것을 방지함
• func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool
  • MainCoordinator를 구성 및 실행
  • 앱의 기본 window를 설정
  • (원래 기본 window는 스토리보드에 의해 설정되지만, 이제는 우리의 책임이므로 우리가 설정해 주어야 한다)

5. 뷰 컨트롤러 만들기

첫 화면인 로그인 화면과 홈 화면을 만들어 봅니다.

LoginViewController

import Foundation
import UIKit

class LoginViewController: UIViewController {

    weak var coordinator: LoginCoordinator?

    override func viewDidLoad() {
        super.viewDidLoad()
        let loginItem = UIBarButtonItem(title: "로그인", style: .plain, target: self, action: #selector(loginButtonDidTap))
        self.navigationItem.rightBarButtonItem = loginItem
    }

    deinit {
        print("\(type(of: self)) deinit")
    }

    @objc
    func loginButtonDidTap() {
        coordinator?.login()
    }
}

HomeViewController

import Foundation
import UIKit

class HomeViewController: UIViewController {

    weak var coordinator: HomeCoordinator?

    override func viewDidLoad() {
        super.viewDidLoad()
        let item = UIBarButtonItem(title: "로그아웃", style: .plain, target: self, action: #selector(logoutButtonDidTap))
        self.navigationItem.rightBarButtonItem = item
    }

    deinit {
        print("\(type(of: self)) deinit")
    }

    @objc
    func logoutButtonDidTap() {
        coordinator?.logout()
    }
}

• weak var coordinator: LoginCoordinator?
  • 모든 뷰 컨트롤러들은 자신의 코디네이터와 대화할 수 있어야 합니다.
  • 따라서 약한참조로 자신의 코디네이터를 소유합니다.
  • ✅ 앱의 규모가 커지면 코디네이터 대신 개별 프로토콜을 사용할 수 있습니다. - 링크 참조

6. 뷰 컨트롤러를 관리할 자식 코디네이터 만들기

• 자식 코디네이터에서 화면을 전환하는 메서드는 start() 가 아니어도 됩니다

LoginCoordiniator

import Foundation
import UIKit

class LoginCoordinator: Coordinator {

    var childCoordinators: [Coordinator] = []
    var navigationController: UINavigationController
    weak var parentCoordinator: AppCoordinator?

    init(navigationController: UINavigationController) {
        self.navigationController = navigationController
    }

    func start() { // VC 설정을 시작하는 역할
        // loginVC 셋팅
        let viewController = LoginViewController()
        viewController.coordinator = self
        viewController.view.backgroundColor = .systemBrown
        viewController.title = "Login"
        navigationController.pushViewController(viewController, animated: true)
        print("LoginViewController를 표시합니다")
    }

    func login() {
        parentCoordinator?.didLoggedIn()
    }

}

HomeCoordinator

import Foundation
import UIKit

class HomeCoordinator: Coordinator {

    var childCoordinators: [Coordinator] = []
    var navigationController: UINavigationController
    weak var parentCoordinator: AppCoordinator?

    init(navigationController: UINavigationController) {
        self.navigationController = navigationController
    }

    func start() {
        // homeVC 셋팅
        let viewController = HomeViewController()
        viewController.coordinator = self
        viewController.view.backgroundColor = .systemPurple
        viewController.title = "Home"
        navigationController.pushViewController(viewController, animated: true)
        print("HomeViewController를 표시합니다")
    }

    func logout() {
        parentCoordinator?.didLoggedOut()
    }
}

예제 프로젝트를 완성한 상태에서 파일별 코드를 가지고 설명하다 보니 순서나 동작 방식이 이해가 어려우실 것 같습니다(ㅠㅠ)

깃헙 저장소 main 브랜치에 전체 코드가 있으니 실행해보며 설명을 읽으시는 걸 강력히 추천드립니다.

(번외) delegate로 부모코디네이터-자식코디네이터-뷰컨트롤러 소통하기

지금까지 설명한 방식은 뷰컨트롤러가 코디네이터를 프로퍼티로 소유하는 패턴입니다.

parentCoordinator 프로퍼티를 통해 부모 코디네이터-자식 코디네이터 - 뷰컨트롤러가 대화하는 버전.

이 방식과는 달리 delegate 프로토콜을 통해 부모 코디네이터-자식 코디네이터 - 뷰컨트롤러가 대화하는 방식으로도 구현이 가능합니다.

같은 깃헙 저장소의 delegate 브랜치 에 delegate 프로토콜로 동작하는 버전도 올려 두었습니다.

개인적으로 저는 이 방식보다 프로퍼티를 소유하는 게 흐름이 덜 복잡하고, 훨씬 직관적으로 동작해서 좋았습니다.

마무리

언젠가 정리해야지 정리해야지.. 했던 코디네이터 패턴을 드디어 정리했네요.

코디네이터 패턴을 배우는 분들께 이 글이 조금이라도 도움이 되셨으면 합니다! 🙏