App 화면 이동 및 데이터 전달 4가지 방법

앱의 화면 이동 , 데이터 전달 방법

코드베이스 컴포넌트, 코드로 화면 이동

코드베이스로 컴포넌트 생성 및 오토레이아웃 잡은 경우,

먼저 새로운 FirstViewController 를 생성하여 코드베이스로 레이블, 버튼 등 구성했을 경우 하단에 내용과 같이 코드를 구성할 수 있다.

UILabel 과 UIButton 을 담아 줄 변수를 선언하여 레이블을 만들어준다. 이 변수 안에 레이블의 오토레이아웃, 셋업 등 화면에 구성될 수 있도록 만들어준다.

class FirstViewController: UIViewController {

    let mainLabel = UILabel()
    
    // 따로 적지 않고 변수에 바로 클로저를 선언하여 보다 간편하고 깔끔하게 버튼을 만들어 줄 수 있다.
    lazy var backButton: UIButton = {
        let button = UIButton(type: .custom)
        button.setTitle("Back", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .blue
        button.titleLabel?.font = UIFont.boldSystemFont(ofSize: 20)
        button.addTarget(self, action: #selector(backButtonTapped), for: .touchUpInside)
        
        return button
    }()

// 레이블과 버튼의 오토레이아웃 설정
func makeAutoLayout() {
        mainLabel.translatesAutoresizingMaskIntoConstraints = false
        mainLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        mainLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        
        backButton.translatesAutoresizingMaskIntoConstraints = false
        backButton.widthAnchor.constraint(equalToConstant: 70).isActive = true
        backButton.heightAnchor.constraint(equalToConstant: 40).isActive = true
        backButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -40).isActive = true
        backButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    }

 

이 후 버튼을 누를 경우 이전의 화면으로 돌아 갈 수 있게 dismiss 를 선언해 넣어준다.

@objc func backButtonTapped() {
        dismiss(animated: true)
    }

 

그 이후 view 위에 설정한 레이블과 버튼이 올라올 수 있도록 .addSubview 를 선언하여 준다.

func setup() {
        mainLabel.font = UIFont.systemFont(ofSize: 22)
        
        view.addSubview(mainLabel)
        view.addSubview(backButton)
    }

 

이렇게 전부 설정이 완료 되면 초기 화면에서 버튼을 누르면 입력된 데이터와 함께 화면이 이동되도록 코드로 구성해 보자

먼저 처음 파일을 생성한 FirstViewController 클래스를 불러와 변수에 담아준다.

그 이후 FirstViewController 에서 이동할 데이터를 선언한다.

//FirstViewController
	var someString: String? 
 
 mainLabel.text = someString
 
 // ViewController 로 이동 후 위에 선언된 변수를 통해 데이터를 넣어준다.
 // 1) 코드로 화면 이동 (다음화면이 코드로 작성되어있을때만 가능한 방법)
    @IBAction func codeNextButtonTapped(_ sender: UIButton) {
        let firstVC = FirstViewController()
        
        firstVC.someString = "안녕하세요"
        firstVC.modalPresentationStyle = .fullScreen           // 다음창뜨는 여러가지 옵션
        present(firstVC, animated: true, completion: nil)
        
    }

 

present 를 사용하여 FirstViewController를 담은 firstVC 를 넣어주면 “안녕하세요” 라는 데이터도 다음 화면에 넘어가게 된다.

//데이터가 넘어갈때 변수를 사용해서 넘어가야하는 이유

firstVC.mainLabel.text = ""   // x 변수에 넣지 않고 이렇게 값을 받게 되면 오류가 날 수 있다.
firstVC.someString = "" // o 더욱 안전하게 변수에 값을 넣어 넘기도록 하자

---

코드로 스토리보드 객체 생성 후 화면 이동

 

스토리보드 컴포넌트를 활용하여 ViewController 를 넣고 storyboard 식별자를 선언한다.

 

 

class SecondViewController: UIViewController {
    @IBOutlet weak var mainLabel: UILabel!
    var someString: String?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        mainLabel.text = someString
    }
    
    @IBAction func backButtonTapped(_ sender: UIButton) {
        dismiss(animated: true,completion: nil)
    }
}

 

이전과 마찬가지로 이전으로 넘어가는건 dismiss 를 설정하면 간단하게 구현되고

코드베이스로 빽빽하게 코드가 많았던 첫번째 VC보다 간편하게 구성할 수 있다.

IBOutlet , IBAction 을 통해 안에있는 레이블과 버튼을 연결한 후

ViewController 로 이동한다 >>>

@IBAction func storyboardWithCodeButtonTapped(_ sender: UIButton) {
    if let secondVC = storyboard?.instantiateViewController(withIdentifier: "secondVC") as? SecondViewController {
        secondVC.someString = "스토리 보드로 짠거 코드로 화면이동 하기"
        //secondVC.mainLabel.text = "할말"  이런 식으로 다음 화면에 던지면 안된다. 오류가뜸. 변수를 만들어 변수를 통해 데이터를 전달할 수 있도록 꼭 기억
        secondVC.modalPresentationStyle = .fullScreen
        present(secondVC, animated: true, completion: nil)
        
    } // 타입캐스팅까지 넣어줘야함
}

 

아까 코드베이스와는 다르게 일반적으로 present 만 사용할 순 없다. 스토리 보드를 사용했기 때문에 스토리보드에 사용된 메모리와 연결시키는 과정이 필요하다.

변수를 설정하여 storyboard.instantiateViewController 를 설정한 후 SecondViewController의 identifier 를 지정하여 넣어준다. 그 이후 SecondViewController 와의 타입캐스팅을 통해 연결한다.

그렇다면 옵셔널로 구성되어있기 때문에 guard let 혹은 if let 으로 해당 내용을 풀어주기만 한다면 연결이 완성된다.

위에서 말했던 내용과 같이 데이터는 변수에 담아 이동하는 것으로 한다 **

---

스토리보드에서의 화면 이동(간접 세그웨이)

스토리 보드에서 view 들 간을 연결해주는 이 줄이 바로 segue(세그웨이) 이다.

이전과는 다른 방식으로 이 세그웨이를 활용하여 위와 동일하게 데이터와 화면 이동을 할 수 있는데 방법이 조금 다르다.

먼저 세번째 VC 를 살펴보면

class ThirdViewController: UIViewController {
    
    @IBOutlet weak var mainLabel: UILabel!
    
    var someString: String?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        mainLabel.text = someString

    }
    
    @IBAction func backButtonTapped(_ sender: UIButton) {
        
        dismiss(animated: true, completion: nil)
    }
}

 

두번째 방법(스토리보드 후 코드로 연결) 과 동일한 VC 구성이므로 넘어가자

// 3) 스토리보드에서의 화면 이동(간접 세그웨이)
    func storyboardWithSegueButtonTapped(_ sender: UIButton) {
        
        performSegue(withIdentifier: "toThirdVC", sender: self)
    }
    
    //prepare 세그웨이를 재정의를 해야 데이터 전달이 가능함.
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "toThirdVC" {
            
            let thirdVC = segue.destination as! ThirdViewController
            // 데이터 전달 가능
            thirdVC.someString = "세그를 통한 데이터 전달은 복잡하네.."
        }

 

먼저 performSegue 를 통해 세그를 연결할 수 있도록 세그 식별자를 연결한다.

그 이후 prepare 를 통해 VC를 연결하여 현재 세그가 toThirdVC 일 경우에 화면에 띄우고 싶은 데이터를 넣게되면 화면 이동이 가능하고 데이터도 전달되게 된다.

performSegue, prepare 의 경우 이미 애플에서 만들어 둔 메서드 이므로 키워드를 잊지 않고 세그를 통해서 화면 이동 , 데이터 전달이 필요할 경우 찾아 사용하면 된다.

---

스토리보드에서의 화면 이동(직접 세그웨이)

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        //print(#function)
        if segue.identifier == "toThirdVC" {
            let thirdVC = segue.destination as! ThirdViewController
            thirdVC.someString = "안녕하세요"
            //thirdVC.mainLabel.text = "안녕하세요"    // 에러발생 (스토리보드 객체가 나중에 생김)
        }
        
        if segue.identifier == "toFourthVC" {
            let fourthVC = segue.destination as! FourthViewController
            fourthVC.someString = "안녕하세요"
            //fourthVC.mainLabel.text = "안녕하세요"    // 에러발생 (스토리보드 객체가 나중에 생김)
        }
    }