[Swift] 델리게이트 패턴 iOS

A라는 뷰 컨트롤에서 B라는 뷰 컨트롤로 이동할 때 데이터를 넘겨줘야 할 경우가 있습니다. 이럴 때 쓸 수 있는 방법이 스토리보드라면 segue를 사용하거나 B에 프로퍼티를 만들어 접근하는 방법이 있습니다. 그런데 만약에 A <- B 처럼 현재 보이는 화면이 사라지고 뷰를 보여지게 했던 뷰 컨트롤러로 다시 전달해야 할 때 delegate 패턴을 사용할 수 있습니다. Backward passing data 할 수 있도록 view를 구성하고 델리게이트 패턴을 위해 프로토콜 생성과 채택까지 이번 포스팅에서 다뤄 보겠습니다~

---

대리자는 위임자라고도 하며 위임자에서 수신자에 정의된 함수를 실행 할 수 있습니다. 이름 그대로 위임자에게 자신이 할 일을 위임했다고 생각하면 됩니다(라고 말하지만 처음엔 정말 낮선 개념이라 힘들었다...)

자 이 그림만 보면 됩니다 ㅎㅎ

이번 프로젝트에서는 ViewController와 BViewController 라는 두개의 뷰 컨트롤러가 있고

 ViewController 에서 BViewController 를 띄워 준뒤

BViewController 에서 입력한 값을 ViewController 에서 볼 수 있도록 하는 것이 목표 입니다.

말 그대로 뒤로 데이터를 전달하는 것!@

 

이때 필요한 것은 델리게이트 패턴입니다! 

델리게이트 패턴을 위해 

1. 프로토콜을 만듭니다 

프로토콜은 자바에서 implementation과 비슷하게 구현해 줘야 하는 형식을 지정하는 메뉴얼 같은 것이라고 보시면 되요

따라서 BViewController는 형태를 만들고 그걸 ViewController 에서 구현해 주도록 할 거에요

이때 BViewController 는 delegate라는 프로퍼티를 가집니다

2. deleage
이 객체에 ViewContrller에서 자신(self) 를 delegate 에 지정해줍니다

그렇게 되면 BViewController 는 delegate 객체로 ViewController의 delegate를 위한 함수를  실행 할 수 있는 것입니다!!

자 그러면 이제 예제! 

 

---

BViewController 의 뷰 구성하기

우선 스위프트 프로젝트를 만들고 실행해 주세요

 프로젝트 만들면 기본적으로 세팅되어 있는 곳에서  시작합니다.

 

BViewController.swift 와 BViewController.xib를 생성해 줍니다.

이제 xib의 뷰를 연결해 줘야 합니다.

BViewControlelr.xib를 더블클릭에서 창에 띄운뒤 

 

BViewController.xib의 상단에 있는

File's Owner 클릭 

가장 오른 쪽에 있는 connection inspector 클릭

저기 view - xview O이렇게 되어 있는 곳에서 O 부분 가장 오른쪽 동그라미를 드래그 해서

계층 구조 제일 상단 

View에 떨궈 줍니다

그 후에 

File's Owner 다시 클릭

Attributes Inspector 에서 커스텀 클래스를

이어줄 클래스 명으로 지정해 줍니다

 

커멘트 + 쉬프트 + L을 눌러서 UILabel과 textField를 view 에 넣어 줍니다.

    @IBOutlet weak var nameTextField: UITextField!

텍스트 필드만 BViewController 에서 IBOutlet으로 이어줍니다

BViewController 에 UITextFieldDelegate 를 채택해 줍니다

class BViewController: UIViewController, UITextFieldDelegate{
// (생략)
}

자 이제 BViewController 의 뷰 작업은 끝났습니다. 이제 이 포스팅의 핵심인 

프로토콜을 구현해 보도록 하겠습니다~

 

---

프로토콜을 구현해 줍니다. 

 

BViewController.swift

protocol BViewControllerDelegate {
    func updateLabel(_ name: String)
}

BViewControllerDelegate를 채택하는 뷰 컨트롤러는 updateLabel(_:) 이라는 함수를 구현해야 합니다

이제 BViewController 에 delegate 프로퍼티를 하나 생성합니다. 

 var delegate: BViewControllerDelegate?

이 delegate 프로퍼티로 BViewControllerDelegate를 구현한 뷰 컨트롤러에서 델리게이트에 정의된 함수에 접근 할 수 있습니다.

이렇게 프로토콜을 구현했으면 아래와 같이 동작을 위한 코드를 작성해 줍니다.

import UIKit

protocol BViewControllerDelegate {
    func updateLabel(_ name: String)
}

class BViewController: UIViewController, UITextFieldDelegate{
    
    @IBOutlet weak var nameTextField: UITextField!
    
    var delegate: BViewControllerDelegate?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let backButton = UIButton()
        backButton.addTarget(self, action: #selector(popViewController), for: .touchUpInside)
        backButton.setImage(UIImage(systemName: "chevron.backward"), for: .normal)
        
        self.navigationItem.leftBarButtonItem = UIBarButtonItem(customView: backButton)
        
        nameTextField.delegate = self
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
    }
    
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        
        if (nameTextField.text != "") {
            delegate?.updateLabel(nameTextField.text ?? "")
            nameTextField.resignFirstResponder()
        }
        
        return true
    }
    
    @objc func popViewController() {
        self.dismiss(animated: true, completion: nil)
    }
}

viewDidLoad 에서는 네비게이션에 들어갈 버튼과 

텍스트 필드의 동작을 위해 델리게이트 객체에 self를 지정해줍니다. 

이름에서 알 수 있듯이 UITextFieldDelegate 또한 델리게이트 패턴! 

 

textFieldShouldReturn(_:) 은 키보드(블루투스 키보드 포함)의 엔터(리턴키)를 눌렀을 때 호출되는 함수 입니다.

만약 텍스트 필드의 텍스트가 빈값이 아니라면("")

델리게이트로 지정된 뷰 컨트롤러에서 구현된 updateLabel(_)을 호출해서 텍스트 필드에 입력된 텍스트를 전달해 줍니다.

그 후에 텍스트 필드의 firstResponder를 resign 시켜 줍니다.

이제 BViewControllerDelegate 를 채택하는 ViewController 를 구현하겠습니다.

 

---

 

Main.stroyboard 

라벨과 버튼을 하나씩 배치해 줍니다. 

버튼은 BViewController 를 화면에 Present 해줄 버튼이고

라벨은 BViewController 의 텍슨트 필드에서 입력된 텍스트가 보여질 라벨입니다. 

 

각각 IBOutlet을 이어주세요

    @IBOutlet weak var nameLabel: UILabel!
    
    @IBOutlet weak var pushViewButton: UIButton!

코드를 작성해 줍니다. 우선 BViewControllerDelegate를 채택해 주세요

class ViewController: UIViewController, BViewControllerDelegate{
}

 

override func viewDidLoad() {
        super.viewDidLoad()
        pushViewButton.addTarget(self, action: #selector(pushBViewcontroller), for:.touchUpInside)
        
    }

버튼에 addTarget을 지정해 줍니다. 

pushBViewController() 는 BViewController 를 present 하는함수 입니다.

    @objc func pushBViewcontroller() {
        let bViewController = BViewController()
        bViewController.delegate = self 
        let navigationController = UINavigationController(rootViewController: bViewController)
        navigationController.modalPresentationStyle = .fullScreen
        
        self.present(navigationController, animated: false, completion: nil)
    }

BViewController의 delegate에 self로 자신을 지정해줍니다. 

delegate로 이어져 ViewController는 BViewControllerDelegate 에서 지정된 함수를 구현하고

BViewController는 delegate를 통해 ViewController에서 구현된 함수를 사용할 수 있게 됩니다.

 

    func updateLabel(_ name: String) {
        nameLabel.text = name
    }

마지막으로 updateLabel(_:)을 구현해 줍니다

 

이제 빌드하고 코드를 실행해 주면

틀리거나 이상한 점이 있다면 댓글 부탁드립니다

 

 

 

참고 사이트:

learnappmaking.com/pass-data-between-view-controllers-swift-how-to/#back-delegation

Pass Data Between View Controllers – LearnAppMaking