IBSegueAction사용해서 화면전환하기

✍🏼 상황: 테이블 뷰를 클릭했을 때 화면이 전환되면서 클릭한 cell의 title이 전환된 화면 중앙에 나타난다. ✍🏼

 

1. 화면구성하기 

아래와 같이 화면을 구성해준다.

Navigation Controller - TabeView가 있는 ViewController       Label이 있는 ViewController

화면구성도

 

 

 

2. Segue연결해주기 

아래와 같이 화면을 Segue로 연결해서 화면 전환을 시켜준다. 

Navigation Controller - TabeView가 있는 ViewController ---(Segue)--- Label이 있는 ViewController

 

 

 

 

3. IBSegueAction연결하기 + Segue Identifier 입력하기

아래와 같이 Segue를 우클릭해서 IBSegueAction을 만들어주고 아래와 같이 코드를 작성한다.

IBSegueAction

 

이제 IBSegueAction을 연결했으니 해당 Segue의 Identifier를 입력해야한다. 

 

❓ 왜 Segue의 Identifier를 입력해야하나?

Segue의 Identifier를 입력해야하는 이유는 performSegue(withIdentifier: , sender: )를 사용할 때withIdentifier에 입력해주어야 어떤 Segue인지 파악해서 실행시켜줄 수 있기 때문이다.

 

Segue의 Identifier

 

 

4. ViewController 코드 작성하기

 

아래와 같이 IBSegueAction을 연결해주고 반환 VC를 작성해주면 된다.

그리고 didSelectRowAt을 사용해서 performSegue(withIdentifier: , sender: )를 실행시켜준다.

 

❓ 왜 performSegue(withIdentifier: , sender: )을 사용해야하나?

performSegue를 사용하지 않고 화면을 넘길 수도 있다. 단, 그런 경우는 버튼같은 사용자가 액션을 하면 실행되는 Component에 Segue를 연결해 해당 액션이 실행되면 바로 Segue가 작동하도록 만들 수 있다. 

다만, 현재는 ViewController 자체에 Segue를 연결해놓고 해당 부분을 작동시키고 싶은 조건에서만 performSegue를 사용해서 Segue를 작동시킨다.

 

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var myTableView: UITableView!
    
    var tableViewCellItem = ["Item 1", "Item 2", "Item 3"]
    var seletItem = 0 // 선택된 cell의 indexPath.row를 담는 변수
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        myTableView.dataSource = self
        myTableView.delegate = self
    }

//MARK: - IBSegueAction
    @IBSegueAction func goToNextVC(_ coder: NSCoder, sender: Any?, segueIdentifier: String?) -> showItemViewController? {
        return showItemViewController(coder: coder, itemTitle: tableViewCellItem[seletItem])
    }
    
    
}

//MARK: - Extension(TableView)
extension ViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return tableViewCellItem.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = myTableView.dequeueReusableCell(withIdentifier: "ContentCell", for: indexPath)
        cell.textLabel?.text = tableViewCellItem[indexPath.row]
        return cell
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        seletItem = indexPath.row
        performSegue(withIdentifier: "goToShowVC", sender: self) //Segue를 작동시키기 위한 부분 
    }
}

 

 

 

 

5. showItemViewController 코드 작성하기

import UIKit

class showItemViewController: UIViewController {

    let itemTitle: String // 전환 전의 화면에서 받아올 데이터를 담는 변수
    
    init?(coder: NSCoder, itemTitle: String){
        self.itemTitle = itemTitle
        super.init(coder: coder)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    @IBOutlet weak var itemTitleLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        itemTitleLabel.text = itemTitle
       
    }
}

 

여기까지 완료했다면 아래와 같이 화면전환을 하면서 데이터를 전달할 수 있다.  (해당 프로젝트 깃헙주소)

 

 

 

 

 

 

 

[참고사항]

 

글을 보다보면 Coder라는 값이 있다. init?(coder: NSCoder, itemTitle: String),

return showItemViewController(coder: coder, itemTitle: tableViewCellItem[seletItem]) 이 두부분에서 coder를 발견할 수 있다. coder에 대한 자세한 내용은 해당 블로그를 보면 좋을거 같다.