[iOS] 사용자 인터페이스와 로직 연결 - @IBOutlet와 @IBAction

TIL 240126

 

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

인터페이스 빌더의 객체를 코드와 연결하기 위해 @IBOutlet와 @IBAction 어노테이션을 사용한다.

 

@IBOutlet 와 @IBAction 소개

• SwiftUI vs UIKit 
• Storyboard vs Code
• Stroryboard에서 화면과 코드를 연결하는 방법

UI를 그리는 방법 중 SwiftUI와 UIKit 방식이 있다. 그 중 UIKit으로 화면을 그린다고 선택했을 때 크게 두 가지 방법이 있다. Storyboard와 Code 방법이 있는데 Storyboard만으로는 화면을 그릴 수 없어 코드와 스토리보드를 연결해주는 과정이 필요하다. 

---

 

@IBOutlet

• 연결 방법은 드래그 앤 드롭
• 컴포넌트를 연결 함
• 화면에 있는 뷰와 코드를 연결할 때 사용

Interface Builder Outlet의 줄임말으로 사용자 인터페이스 요소 사이의 연결을 나타낸다.

컴포넌트를 코드에 연결하여 해당 요소를 제어할 수 있다. 간단하게 스토리보드로 그린 객체를 Ineterface Builder가 알아볼 수 있게 해주는 과정이다.

 

 

 

원하는 컴포넌트를 화면에 배치한 상태에서 실행해보자.

우선 화면 세팅은 Assistant로 스토리보드와 ViewController 코드를 열어준다.

 

 

IBOulet을 사용하여 요소를 코드와 연결하기 위해서 control 키를 누르고 (혹은 마우스 오른쪽 버튼 클릭) 코드 창에 드래그 앤 드롭을 하면  다음과 같은 창이 나타난다.

 

원하는 이름을 입력하여 연결해주면 @IBOulet 변수가 선언된다.

Weak은 약한참조라는 의미를 가지고 있다.

 

 

코드 좌측 동그라미를 선택하면 연결된 컴포넌트를 확인할 수 있다.

 

---

 

@IBAction

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

Interface Builder Action의 줄임말으로 인터페이스 요소를 조작할 때 실행되는 메서드를 나타낸다. 

버튼을 눌렀을 때 실행하고 싶은 액션을 정의하기 위한 메서드를 나타내보자.

 

 

마찬가지로 컴포넌트를 끌어와 소스코드에 연결해준다.

Touch Up Inside는 버튼을 눌렀다 뗐을 때 실행되는 제스처이고 원하는 Event를 선택할 수 있다.

 

 

액션 메소드에 화면의 색상을 바꾸는 로직을 작성해봤다.

프로젝트를 빌드하여 시뮬레이터 화면의 Button을 누르면 콘솔에 문구가 출력되며 배경 색상이 바뀌는 걸 확인할 수 있다.

 

 

같은 방법으로 Lable도 변경해주었다. 

Lable 안의 text 를 변경해주는 방법이다

 

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var myButton: UIButton!
    @IBOutlet weak var helloLable: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    @IBAction func didTapMyButton(_ sender: Any) {
        print("배경 색상을 노란색으로 바꿀게요!")
        view.backgroundColor = .yellow
        helloLable.text = "Hello Yellow"
    }
}