2일차

사용자 인터페이스와 로직 연결

IBAction 및 IBOutlet 소개

• 컨셉
  • UI를 그리는 방법 중 하나
    • SwfitUI vs UIKit
    • Storyboard vs Code
    • Storyboard에서 화면과 코드를 연결하는 방법

IBAction

• 연결 방법은 드래그 앤 드롭
• 액션을 연결 함
• 우리가 어떤 액션을 했을 때, 동작 하는 트리거

IBOutlet

• 연결 방법은 드래그 앤 드롭
• 컴포넌트를 연결 함

• 화면에 있는 뷰와 코드를 연결할 때 사용

• 버튼 클릭과 화면 업데이트
  • 버튼을 눌렀을 때 동작하게
  • 버튼 누름을 트리거로 화면이 업데이트 되는 것
  • 코딩을 최소한으로 구현

위의 화면에서 option을 누른 채로 main을 클릭하게되면

이렇게 창을 하나 더 추가 할 수 있다.

Component를 클릭하고 Control을 누르고 드래그를 하여 코드쪽에 넣으면 아래 사진처럼 나온다.

연결이 잘 되어있는 지 확인을 하려면 11번, 13번 사이에 12대신 새로운게 생기는데 그곳으로 포인터를 갖다 대보자.

Action은 보통 override 아래에 추가한다.

버튼을 눌렀을때 작동하는 코드를 작성하였다. (IBAction을 만들었다.)

실제로 시뮬레이터에서 Tab을 터치하면 오른쪽 아래와 같이 안녕이 라는 단어가 출력이 되는 것을 확인 할 수 있다.

command를 누른 상태에서 component같은걸 클릭하면 세부 속성을 볼 수 있다.

응용 문제. -> Hello를 I’m Harold로 바꿔보자.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var myButton: UIButton!
    
    @IBOutlet weak var helloLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    @IBAction func didTapMyButton(_ sender: Any) {
        print("배경색을 노란색으로!")
//        view.backgroundColor = .yellow
        helloLabel.text = "I'm Harold"
    }
    
}

option키를 누르고 변수를 클릭하면 이렇게 정보를 볼 수 있다.