[코드베이스] 코디네이터 패턴

[참고 영상]

https://youtu.be/SAZzcKvOvAE

---

[학습 목표]

출처 : https://medium.com/journey-of-one-thousand-apps/coordinators-reexamination-e712f74dc13e

코디네이터 패턴이란 VC 사이의 데이터를 전달해주는 하나의 코디네이터를 만들어서 데이터 연결을 해당 코디네이터에서 해주는 것이다.

단순히 VC 끼리 데이터를 연결할때와 달리 해당 코디네이터를 통해서 함으로서 팀 프로젝트와 같이 협업을 해야할 때 데이터 연동이 직접 하는것보다 쉬워진다는 장점이 있다.

알아두면 꼭 한번은 쓸만한 패턴이므로 한번씩은 봐두자

---

[구현 방법]

 

1. 우선은 해당 스토리보드 환경을 코드베이스 환경으로 바꿔주자. (참고글 : 코드베이스로 구현)

2. 이제 VC A 와 VC B 를 만들어 줄 것이다. 단순히 버튼과 화면색깔만 있는 VC A

class ViewController: UIViewController, Coordinating {//코디네이팅을 추가해주는걸 잊지말자
	//코디네이터 변수를 만들어주자. 코디네이터와 연결을 하기위해 필수인 변수이다.
    var coordinator: Coordinator?

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .red //화면 색깔 바꾸기.

        let button = UIButton(frame: CGRect(x: 0, y: 0, width: 220, height: 55)) //버튼 생성
        view.addSubview(button) //버튼 view 넣기.
        button.center = view.center
        button.backgroundColor = .systemGreen
        button.setTitleColor(.white, for: .normal)
        button.addTarget(self, action: #selector(didTapButton), for: .touchUpInside)
        button.setTitle("Tap Me!", for: .normal)
    }

    @objc func didTapButton() {
	    //button을 누르면 코디네이터에서 이벤트 발생
        coordinator?.eventOccured(with: .buttonTapped)    }
}

와 단순히 화면이 파란색깔인 VC B를 만들어주자.

class SecondViewController: UIViewController, Coordinating { //코디네이팅을 추가해주자.
    // coordinator를 제어할 변수를 만들어주자. 해당 변수가 하는 역할이 여기선 없어보일수 있지만 나중에 코디네이터 쪽에서 필요하기에 없으면 동작이 안된다.
	var coordinator: Coordinator?
    
    //단순히 화면색깔이 파란색인 뷰를 만들어주자.
    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Second"
        view.backgroundColor = .systemBlue
    }
}

3. 이제 코디네이터를 만들어주자. 여기서 코디네이터는 프로토콜을 활용해서 만들어줄 것이며 해당 코디네이터는 viewmodel 역할을 한다고 생각하면 편하다.

//버튼이 눌려졌을때의 이벤트를 관리해주자.
enum Event{
    case buttonTapped
}

//코디네이터 프로토콜을 생성하자.
protocol Coordinator {
	//네비게이션 컨트롤러 -> VC a 와 VC b 사이를 네비게이션으로 제어하기 위해 넣었다.
    var naviationController: UINavigationController? {
        get set
    }
    var children: [Coordinator]? {get set}

	//터치시 이벤트가 일어나는 함수
    func eventOccured(with type: Event)
    //시작하는 함수
    func start()
}

//코디네이팅 프로토콜 해당 프로토콜을 통해서 코디네이터 프로토콜에 들어간다.
protocol Coordinating {
    var coordinator: Coordinator? {get set}
}

4. 이제 마지막으로 해당 코디네이터 모델을 활용하는 메인 코디네이터 뷰를 만들어주자.

class MainCoordinator: Coordinator {
    //네비게이션 컨트롤러
    var naviationController: UINavigationController?
    
    var children: [Coordinator]? = nil
    //이벤트 발생 함수
    func eventOccured(with type: Event) {
        switch type {
        //버튼이 눌려지면
        case .buttonTapped:
        	//vc는 VC b가 된다.
            var vc: UIViewController & Coordinating = SecondViewController()
            vc.coordinator = self
            self.naviationController?.pushViewController(vc, animated: true)
        }
    }
    
    //시작하는 함수
    func start() {
        var vc: UIViewController & Coordinating = ViewController()
        vc.coordinator = self
        naviationController?.setViewControllers( [vc], animated: false)
    }   
}

---

[구현 영상]

*해당 영상에서는 네비게이션 back 버튼을 보이기 위해서 VC B의 배경색을 초록색으로 바뀌었다.(네비게이션의 기본색깔이 파란색이라 겹쳐서 안보이는 효과 방지)