[iOS] 스토리보드/코드로 화면 전환하기 - Navigation(push/pop)

📚 Navigation 창은 좌우로 화면이 전환되는 형태로,

모달뷰와 다르게 메뉴를 누르면 계속 하위 메뉴로 이어서 들어갈 수 있습니다.

 

Navigation Controller는 화면을 나타내주는 뷰컨들을 Navigation stack에 쌓는 형식으로 관리하며 담아둘 수 있습니다.

여기서 가장 먼저 stack에 추가된 뷰컨이 Root View Controller 입니다.

아래에서부터 차곡차곡 쌓이는 형식이기 때문에 가장 위에 있는 뷰부터 pop이 됩니다.

 

 

🗳 목차

1️⃣ Storyboard로 Navigation 화면 전환하기

2️⃣ 코드로 Navigation 화면 전환하기

 

1️⃣  Storyboard로 Navigation 화면 전환하기

 

 

1. 우선 스토리보드에서 첫 번째 뷰컨을 선택 후

Embed In 메뉴의 Navigation Controller를 선택해줍니다.

 

 

선택하면 아래 사진처럼 됩니다.

 

 

 

2. 첫 번째 화면의 버튼을 선택해서 control을 누른채 두 번째 뷰컨으로 끌어주면

 

 

아래 창이 뜨는데 그 중에서 Show를 선택해줍니다.

 

 

 

---

 

2️⃣  코드로 Navigation 화면 전환하기

 

 

1. 여기서부터 시작합니다.

Navigation Controller로 Embed In 해주는 것까지는 동일합니다.

 

 

 

2. 첫 번째 화면 상의 button에 IBAction을 연결해줍니다.

 

 

 

3. button IBAction 내부의 코드 부분입니다.

모달 화면 전환과 다른 점은 present가 아닌 pushViewController 메소드를 사용한다는 점입니다!

 

 

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func nextButton(_ sender: UIButton) {
        
        guard let nextVC = self.storyboard?.instantiateViewController(identifier: "SecondViewController") as? SecondViewController else { return }
        
        self.navigationController?.pushViewController(nextVC, animated: true)

    }
    
}

 

코드에 대한 자세한 설명은 모달 포스팅에 적어두었으니 링크🐝를 달아두겠습니다~

 

 

 

4. 그렇다면 이전화면으로 돌아갈려면?

popViewController 메소드를 사용하시면 됩니다!

 

  @IBAction func backButton(_ sender: Any) {
        
        self.navigationController?.popViewController(animated: true)
  }
    

 

 

와 끝입니다! 여러분,, 끝...! 이렇게 간단하다니..!

참 쉽네여..

 

🚀✨☄️ 결과화면~!~!