[UIKit] UIKit 프레임워크에 대한 기본기 학습 (UI와 로직 연결하기)

UIKit이란

UIKit은 iOS 앱 개발을 위한 핵심 프레임워크로, UI 요소 및 이벤트를 관리하는 역할을 한다. UIKit을 활용하면 버튼, 레이블, 테이블 뷰 등의 UI 요소를 쉽게 만들고, 화면 전환 및 사용자 입력을 처리할 수 있다.

주요 UI 구성 요소

• UIView: 모든 UI 요소의 기본 클래스

• UILabel: 텍스트를 표시하는 레이블

• UIButton: 사용자가 터치할 수 있는 버튼

• UITextField: 사용자 입력을 받을 수 있는 텍스트 필드

• UIImageView: 이미지를 표시하는 뷰

• UITableView: 리스트 형태의 데이터를 표시하는 테이블 뷰

스토리보드와 코드 기반 UI

• 스토리보드(Interface Builder)

  • UI를 시각적으로 디자인 가능

  • IBOutlet과 IBAction을 사용하여 UI와 코드 연결

• 코드 기반 UI

  • UIView 요소를 직접 생성하고 레이아웃 설정(Auto Layout / SnapKit 활용 가능)

  • 스토리보드 없이 UI 작성이 가능하여 유연한 개발 가능

UI와 로직 연결하기

IBOutlet과 IBAction을 사용한 연결

import UIKit

class ViewController: UIViewController {
    // IBOutlet을 이용한 UI 요소 연결
    @IBOutlet weak var myLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        myLabel.text = "Hello, UIKit!"
    }

    // IBAction을 이용한 버튼 이벤트 처리
    @IBAction func buttonTapped(_ sender: UIButton) {
        myLabel.text = "버튼이 눌렸어요!"
    }
}

코드 기반 UI 연결

import UIKit

class ViewController: UIViewController {
    let myLabel = UILabel()
    let myButton = UIButton()

    override func viewDidLoad() {
        super.viewDidLoad()

        // Label 설정
        myLabel.text = "Hello, UIKit!"
        myLabel.textAlignment = .center
        myLabel.frame = CGRect(x: 50, y: 100, width: 200, height: 50)
        view.addSubview(myLabel)

        // Button 설정
        myButton.setTitle("클릭", for: .normal)
        myButton.setTitleColor(.blue, for: .normal)
        myButton.frame = CGRect(x: 50, y: 200, width: 100, height: 50)
        myButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
        view.addSubview(myButton)
    }

    @objc func buttonTapped() {
        myLabel.text = "버튼이 눌렸어요!"
    }
}