[iOS] Coordinator Design Pattern 번역

Coordinator Design Pattern 번역

Coordinator Design Pattern을 사용하면, 앱의 흐름을 제어할 수 있고 내비게이션 로직을 컨트롤러에 직접 넣는 것을 피할 수 있습니다. 또한 뷰컨트롤러를 서로 분리하는데 도움이 되기 때문에 프로젝트 전체에서 뷰컨트롤러를 재사용할 때 유용합니다.

다음 부분을 다룹니다.

• 개별 코디네이터 생성
• 코디네이터 흐름 활용
• 코디네이터를 사용하여 뷰컨트롤러 간에 데이터 전달

프로젝트의 소스 코드는 하단에서 확인할 수 있습니다.

시작하기

먼저 모든 Coordinator가 준수할 프로토콜 Coordinator를 생성해보겠습니다.

import UIKit

protocol Coordinator {
    func start()
    func coordinate(to coordinator: Coordinator)
}

extension Coordinator {
    func coordinate(to coordinator: Coordinator) {
        coordinator.start()
    }
}

이제 앱 시작을 담당할 AppCoordinator를 만들어야합니다.

import UIKit

class AppCoordinator: Coordinator {

    let window: UIWindow

    init(window: UIWindow) {
        self.window = window
    }

    func start() {
        let navigationController = UINavigationController()
        window.rootViewController = navigationController
        window.makeKeyAndVisible()

        let startCoordinator = StartCoordinator(navigationController: navigationController)
        coordinate(to: startCoordinator)
    }
}

초기 설정을 완료하려면 AppDelegate에서 AppCoordinator의 start 메소드를 실행해야합니다.

import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?
    var coordinator: AppCoordinator?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow()

        coordinator = AppCoordinator(window: window!)
        coordinator?.start()
        return true
    }
}

이제 앱의 첫 화면으로 이동해보겠습니다.

StartCoordinator

AppCoordinator에서 했던 것과 유사하게 StartCoordinator를 생성하고 Coordinator protocol을 채택하겠습니다. 우리는 또한 coordinateToTabBar() 메소드가 포함된 StartFlow라는 프로토콜을 정의하고, 이를 StartViewController에서 실행시킬 것입니다.

import UIKit

protocol StartFlow: AnyObject {
    func coordinateToTabBar()
}

class StartCoordinator: Coordinator {
    let navigationController: UINavigationController

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

    func start() {
        let startViewController = StartViewController()
        startViewController.coordinator = self
        navigationController.pushViewController(startViewController, animated: true)
    }

    // MARK: - Flow Methods
    func coordinateToTabBar() {
        let tabBarCoordinator = TabBarCoordinator(navigationController: navigationController)
        coordinate(to: tabBarCoordinator)
    }
}

StartViewController

여기서는 단순히 화면 중앙에 버튼을 배치하고, startTapped 핸들러 (coordinateToTabBar() 메소드를 호출합니다)를 생성합니다.

import UIKit

class StartViewController: UIViewController {

    // MARK: - Lifycycle
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    // MARK: - Actions
    @objc func startTapped(_ sender: UIButton) {
        coordinator?.coordinateToTabBar()
    }

    // MARK: - Properties
    var coordinator: StartFlow?

    let startButton: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle("Start!", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .systemBlue
        button.layer.cornerRadius = 10
        button.layer.shadowRadius = 5
        button.layer.shadowColor = UIColor.systemTeal.cgColor
        button.layer.shadowOpacity = 1.0
        button.layer.shadowOffset = CGSize(width: -1, height: 3)
        button.addTarget(StartViewController.self, action: #selector(startTapped(_:)), for: .touchUpInside)
        return button
    }()
}

// MARK: - UI Setup
extension StartViewController {
    private func setupUI() {
        if #available(iOS 13.0, *) {
            overrideUserInterfaceStyle = .light
        }

        self.view.backgroundColor = .white
        self.view.addSubview(startButton)

        startButton.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width / 3).isActive = true
        startButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
        startButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        startButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
    }
}

TabBarCoordinator에 coordinate 하는 방법을 살펴보겠습니다.

(아래 코드는 StartCoordinator.swift에 있습니다.)

// MARK: - Flow Methods
func coordinateToTabBar() {
    let tabBarCoordinator = TabBarCoordinator(navigationController: navigationController)
    coordinate(to: tabBarCoordinator)
}

coordinator를 인스턴스화하고 coordinate(to:) 메소드를 호출하기만 하면 됩니다.

이제 coordinator를 UITabBarController에서 어떻게 사용하는지 알아보겠습니다.

TabBarController

import UIKit

class TabBarCoordinator: Coordinator {
    let navigationController: UINavigationController

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

    func start() {
        let tabBarController = TabBarController()
        tabBarController.coordinator = self

        let topRatedNavigationController = UINavigationController()
        topRatedNavigationController.tabBarItem = UITabBarItem(tabBarSystemItem: .topRated, tag: 0)
        let topRatedCoordinator = TopRatedCoordinator(navigationController: topRatedNavigationController)

        let searchNavigationController = UINavigationController()
        searchNavigationController.tabBarItem = UITabBarItem(tabBarSystemItem: .search, tag: 1)
        let searchCoordinator = SearchCoordinator(navigationController: searchNavigationController)

        let historyNavigationController = UINavigationController()
        historyNavigationController.tabBarItem = UITabBarItem(tabBarSystemItem: .history, tag: 2)
        let historyCoordinator = HistoryCoordinator(navigationController: historyNavigationController)

        tabBarController.viewControllers = [topRatedNavigationController,
                                            searchNavigationController,
                                            historyNavigationController]

        tabBarController.modalPresentationStyle = .fullScreen
        navigationController.present(tabBarController, animated: true)

        coordinate(to: topRatedCoordinator)
        coordinate(to: searchCoordinator)
        coordinate(to: historyCoordinator)
    }
}

start() 메소드에서 볼 수 있듯이, 우리는 개별 UINavigationController들과 coordinator들을 생성하고, 이후에 각각의 coordinator에서 coordinate(to:) 메소드를 실행합니다.

결과적으로, 우리는 다른 컨트롤러에 대해 알지 못하는 TabBarController 클래스를 갖게 됩니다.

import UIKit

class TabBarCoordinator: Coordinator {
    let navigationController: UINavigationController

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

    func start() {
        let tabBarController = TabBarController()
        tabBarController.coordinator = self

        let topRatedNavigationController = UINavigationController()
        topRatedNavigationController.tabBarItem = UITabBarItem(tabBarSystemItem: .topRated, tag: 0)
        let topRatedCoordinator = TopRatedCoordinator(navigationController: topRatedNavigationController)

        let searchNavigationController = UINavigationController()
        searchNavigationController.tabBarItem = UITabBarItem(tabBarSystemItem: .search, tag: 1)
        let searchCoordinator = SearchCoordinator(navigationController: searchNavigationController)

        let historyNavigationController = UINavigationController()
        historyNavigationController.tabBarItem = UITabBarItem(tabBarSystemItem: .history, tag: 2)
        let historyCoordinator = HistoryCoordinator(navigationController: historyNavigationController)

        tabBarController.viewControllers = [topRatedNavigationController,
                                            searchNavigationController,
                                            historyNavigationController]

        tabBarController.modalPresentationStyle = .fullScreen
        navigationController.present(tabBarController, animated: true)

        coordinate(to: topRatedCoordinator)
        coordinate(to: searchCoordinator)
        coordinate(to: historyCoordinator)
    }
}

탭 바의 개별 스크린들: TopRated, Search, History를 살펴보도록 하겠습니다.

TopRatedCoordinator

TopRatedViewController의 coordinator는 다음과 같이 구성합니다.

import UIKit

protocol TopRatedFlow: AnyObject {
    func coordinateToDetail()
}

class TopRatedCoordinator: Coordinator, TopRatedFlow {
    weak var navigationController: UINavigationController?

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

    func start() {
        let topRatedViewController = TopRatedViewController()
        topRatedViewController.coordinator = self

        navigationController?.pushViewController(topRatedViewController, animated: false)
    }

    // MARK: - Flow Methods
    func coordinateToDetail() {
        let topRatedDetailCoordinator = TopRatedDetailCoordinator(navigationController: navigationController)
        coordinate(to: topRatedDetailCoordinator)
    }
}

그리고 TopRatedViewController는 다음과 같이 구성합니다.

TopRatedViewController

import UIKit

class TopRatedViewController: UIViewController {

    // MARK: - Lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()

        setupUI()
    }

    // MARK: - Actions
    @objc func showDetailTapped(_ sender: UIButton) {
        coordinator?.coordinateToDetail()
    }

    // MARK: - Properties
    var coordinator: TopRatedFlow?

    let showDetailButton: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle("Show detail", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = UIColor.systemOrange
        button.layer.cornerRadius = 10
        button.layer.shadowRadius = 5
        button.layer.shadowColor = UIColor.orange.cgColor
        button.layer.shadowOpacity = 1.0
        button.layer.shadowOffset = CGSize(width: -1, height: 3)
        button.addTarget(TopRatedViewController.self, action: #selector(showDetailTapped), for: .touchUpInside)
        return button
    }()
}

// MARK: - UI Setup
extension TopRatedViewController {
    private func setupUI() {
        if #available(iOS 13.0, *) {
            overrideUserInterfaceStyle = .light
        }

        self.view.backgroundColor = .white
        self.view.addSubview(showDetailButton)

        showDetailButton.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width / 3).isActive = true
        showDetailButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
        showDetailButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        showDetailButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
    }
}

결과적으로, 다음과 같은 레이아웃을 볼 수 있습니다.

사용자가 showDetailButton을 탭할 때 표시할 세부 정보 화면을 구현해보겠습니다.

TopRatedDetailCoordinator

여기에서는 거의 모든 것이 동일합니다. 차이점은 pushViewController 대신 present 메소드를 사용한다는 것입니다.

import UIKit

protocol TopRatedDetailFlow {
    func dismissDetail()
}

class TopRatedDetailCoordinator: Coordinator, TopRatedDetailFlow {
    let navigationController: UINavigationController

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

    func start() {
        let topRatedDetailViewController = TopRatedDetailViewController()
        topRatedDetailViewController.coordinator = self

        navigationController.present(topRatedDetailViewController, animated: true)
    }

    // MARK: - Flow Methods
    func dismissDetail() {
        navigationController.dismiss(animated: true)
    }
}

TopRatedDetailViewController

이전 뷰컨트롤러처럼, dimissDetailTapped 버튼 핸들러에서 사용하는 coordinator 프로퍼티가 있습니다.

import UIKit

class TopRatedDetailViewController: UIViewController {

    // MARK: - Lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }

    // MARK: - Actions
    @objc func dismissDetailTapped(_ sender: UIButton) {
        coordinator?.dismissDetail()
    }

    // MARK: - Properties
    var coordinator: TopRatedDetailFlow?

    let dismissDetailButton: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle("Dismiss detail", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = UIColor.systemGray
        button.layer.cornerRadius = 10
        button.layer.shadowRadius = 5
        button.layer.shadowColor = UIColor.gray.cgColor
        button.layer.shadowOpacity = 1.0
        button.layer.shadowOffset = CGSize(width: -1, height: 3)
        button.addTarget(TopRatedDetailViewController.self, action: #selector(dismissDetailTapped), for: .touchUpInside)
        return button
    }()

}

// MARK: - UI Setup
extension TopRatedDetailViewController {
    private func setupUI() {
        if #available(iOS 13.0, *) {
            overrideUserInterfaceStyle = .light
        }
        self.view.backgroundColor = .white
        self.view.addSubview(dismissDetailButton)

        dismissDetailButton.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width / 3).isActive = true
        dismissDetailButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
        dismissDetailButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        dismissDetailButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
    }
}

결과적으로, 다음과 같은 workflow를 가집니다.

Search의 workflow도 동일합니다. 대신 History 화면에서 coordinator 간에 데이터를 전달하는 방법에 집중하도록 하겠습니다.

HistoryItem

이 모델은 하나의 coordinator에서 다른 coordinator로 전달하기 위한 매우 간단한 클래스 Model을 정의합니다.

import Foundation

struct HistoryItem {
    let title: String
}

HistoryCoordinator

이전과 마찬가지로 start() 메소드의 navigation 스택에 새로운 뷰컨트롤러를 인스턴스화하여 푸시합니다.

import Foundation
import UIKit

protocol HistoryFlow {
    func coordinateToDetail(with title: String)
}

class HistoryCoordinator: Coordinator, HistoryFlow {
    weak var navigationController: UINavigationController?

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

    func start() {
        let historyViewController = HistoryViewController()
        historyViewController.coordinator = self

        navigationController?.pushViewController(historyViewController, animated: false)
    }

    // MARK: - Flow Methods
    func coordinateToDetail(with title: String) {
        let historyDetailCoordinator = HistoryDetailCoordinator(navigationController: navigationController!, historyItemTitle: title)

        coordinate(to: historyDetailCoordinator)
    }
}import Foundation

struct HistoryItem {
    let title: String
}

HistoryViewController

HistoryItem 객체를 포함한 UITableView를 보여주는 뷰컨트롤러를 생성합니다. 특정 UITableViewCell을 선낵하면, didSelectRow 메소드가 실행됩니다. (이에 대응하는 HistoryItem을 캡쳐해서 HistoryCoordinator에게 전달합니다.)

import UIKit

class HistoryViewController: UIViewController {

    // MARK: - Lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }

    // MARK: - Properties
    var coordinator: HistoryFlow?

    let historyItems: [HistoryItem] = [.init(title: "First item"),
                                       .init(title: "Second item"),
                                       .init(title: "Third item"),
                                       .init(title: "Fourth item")]

    lazy var tableView: UITableView = {
        let tableView = UITableView()
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
        tableView.delegate = self
        tableView.dataSource = self
        return tableView
    }()
}

// MARK: - UITableView Delegate & Data Source
extension HistoryViewController: UITableViewDelegate, UITableViewDataSource {

    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return historyItems.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell")!
        cell.textLabel?.text = historyItems[indexPath.row].title
        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        coordinator?.coordinateToDetail(with: historyItems[indexPath.row].title)
        tableView.deselectRow(at: indexPath, animated: true)
    }
}

// MARK: - UI Setup
extension HistoryViewController {
    private func setupUI() {
        if #available(iOS 13.0, *) {
            overrideUserInterfaceStyle = .light
        }

        self.view.backgroundColor = .white
        self.view.addSubview(tableView)

        tableView.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true
        tableView.heightAnchor.constraint(equalTo: self.view.heightAnchor).isActive = true
    }
}

이제 다음과 같은 레이아웃을 볼 수 있습니다.

detail screen으로 이동하겠습니다.

HistoryDetailCoordinator

우리는 표준 navigationController 외에 historyItemTitle 프로퍼티들도 볼 수 있습니다.

HistoryDetailViewController의 고유한 historyItemTitle 프로퍼티를 start() 메소드에 할당합니다.

import UIKit

protocol HistoryDetailFlow {
    func dismissDetail()
}

class HistoryDetailCoordinator: Coordinator, HistoryDetailFlow {
    let navigationController: UINavigationController
    let historyItemTitle: String

    init(navigationController: UINavigationController,
         historyItemTitle: String) {

        self.navigationController = navigationController
        self.historyItemTitle = historyItemTitle
    }

    func start() {
        let historyDetailViewController = HistoryDetailViewController()
        historyDetailViewController.historyItemTitle = historyItemTitle
        historyDetailViewController.coordinator = self

        navigationController.present(historyDetailViewController, animated: true, completion: nil)
    }

    // MARK: - Flow Methods
    func dismissDetail() {
        navigationController.dismiss(animated: true, completion: nil)
    }
}

HistoryDetailViewController

이 컨트롤러는 단순히 화면 상단에 레이블을 표시하고, 중앙에 dismiss 버튼을 표시합니다.

import UIKit

class HistoryDetailViewController: UIViewController {

    // MARK: - Lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }

    // MARK: - Actions
    @objc func dismissDetailTapped(_ sender: UIButton) {
        coordinator?.dismissDetail()
    }

    // MARK: - Properties
    var coordinator: HistoryDetailFlow?
    var historyItemTitle: String? {
        didSet {
            self.titleLabel.text = historyItemTitle
        }
    }

    let titleLabel: UILabel = {
        let label = UILabel()
        label.textColor = .systemIndigo
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    let dismissDetailButton: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle("Dismiss detail", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = UIColor.systemGray
        button.layer.cornerRadius = 10
        button.layer.shadowRadius = 5
        button.layer.shadowColor = UIColor.gray.cgColor
        button.layer.shadowOpacity = 1.0
        button.layer.shadowOffset = CGSize(width: -1, height: 3)
        button.addTarget(HistoryDetailViewController.self, action: #selector(dismissDetailTapped), for: .touchUpInside)
        return button
    }()

}

// MARK: - UI Setup
extension HistoryDetailViewController {
    private func setupUI() {
        if #available(iOS 13.0, *) {
            overrideUserInterfaceStyle = .light
        }
        self.view.backgroundColor = .white
        self.view.addSubview(titleLabel)
        self.view.addSubview(dismissDetailButton)

        titleLabel.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        titleLabel.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 20).isActive = true

        dismissDetailButton.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width / 3).isActive = true
        dismissDetailButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
        dismissDetailButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        dismissDetailButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
    }
}

다음과 같은 workflow를 구성하였습니다.

The Leaks Instrument

메모리 관리는 어떨까요?

Leaks Instrument를 통해 각 해제된 뷰컨트롤러와 해당 coordinator가 할당 해제되는 것을 볼 수 있습니다.