웹개발자의 iOS 개발기(8) - [UIKit] UIKit 입문

UIKit에 대하여 공부해 보았습니다.

01. Storyboard로 UIKit 입문하기

SwiftUI vs UIKit

• 화면을 그리는 방법
• SwiftUI는 MacOS와 iOS 모두 호환
• SwiftUI로 만들지 못하는 것들이 있음 → UIKit도 혼용해야 함
• UIKit은 과거부터 사용되면서 유지보수를 위해서라도 UIKit을 알아야 함.
• Apple에서도 SwiftUI를 밀고 있기 때문에 언젠간 SwiftUI로 완전 대체 될 것이다.

UIKit이 화면을 그리는 방법

• Storyboard
  • GUI를 사용한 스토리보드
• Code
  • SwiftUI처럼 코드만을 사용하는 방법
• 각각의 장단점 존재

SwiftUI 프로젝트 생성시 Multiplatform - app이었다면,

UIKit 프로젝트 생성 시 iOS - App 선택

UIKit 프로젝트 생성1

UIKit 프로젝트 생성2

 

 

Main으로 전체 검색해 보면 Storyboard Name의 속성값이 지정되어 있다.

앱이 실행될 때 처음으로 찾아가는 게 해당 속성값에 지정된 스토리보드이다.

Storyboard 실행

 

그럼 Main에서 EntryPoint를 찾아서 실행된다.

EntryPoint

 

02. View와 ViewController

• View(.storyboard)에 요소를 드래그 앤 드롭하면 그대로 그려진다.
• 그런데 요소를 그리기만 해서는 안된다. 요소의 기능 동작을 하기 위해선 ViewController로 View를 조종해야 한다.

UIViewController를 상속받아야만 ViewController의 역할을 한다.

import UIKit

class ViewController: UIViewController {

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

}

 

개발해보기

• 옵션키 누르고 파일 클릭하면 XCode에서 창이 나눠서 켜진다.
• View에서 요소 선택 후 우클릭으로 드래그해서 ViewController에 넣으면 아래와 같이 창이 뜬다.

• 이를 이용해서 요소마다 Outlet, Action을 정의한다.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var myButton: UIButton!
    @IBOutlet weak var myLabel: UILabel!
    
    @IBAction func didMyButtonTapped(_ sender: Any) {
        print("Hello UIKit!")
        
        myLabel.text = "Hello UIKit"
    }
    
    // View를 다 그린 이후에 동작
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .green
        // Do any additional setup after loading the view.
    }

}

• 이때 생성된 코드가 불필요해져서 삭제 시 ViewController의 코드만 지우면 에러가 발생한다.
• View에서 요소 선택 후 사이드바에서 직접 제거도 해야 한다.

사이드바에서 직접 제거