UIKit이란?

UIKit??

날짜: 2024년 8월 19일

SwiftUI 프레임워크로 처음 iOS 앱에 입문을 하게 되었지만,

이번 네이버 부스트캠프 과정에서 UIKit을 다루게 되었다.

그래서 이번 일을 계기로 UIKit (아직 현업에서는 많이 쓰인다… iOS 버전 때문에) 에 대해 조금 알아보고자 한다.

---

가장 대표적인 차이가 뭔데?

• 많은 사람들이 정의하는 한 문장으론
  • 여기서 UIKit는 명령형
  • SwiftUI는 선언형이다.
• “명령형과 선언형의 차이” 라고 한다.

---

명령형이란?

명령형 프로그래밍(命令型 프로그래밍, 영어: imperative programming)은 선언형 프로그래밍과 반대되는 개념으로, 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 프로그래밍 패러다임의 일종이다. 자연 언어에서의 명령법이 어떤 동작을 할 것인지를 명령으로 표현하듯이, 명령형 프로그램은 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것이다.

• 이게 무슨… 소리일까
• 가장 쉽게 생각하는 방법 중 하나는 아래와 같이 생각하는 거다.
  • “어떻게(How) 코드를 실행할지를 명확히 지시하는 방식”

[UIKit의 예시 코드를 보자]

• 기본적으로 코드 베이스로 UI를 구성하는 방식으로 작성했다.
• 간단히 버튼을 만들고, 버튼이 눌러졌을 때 print하도록 한 거다.

import UIKit

class MyViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // UIButton 생성 및 설정
        let button = UIButton(type: .system)
        button.setTitle("Tap Me", for: .normal)
        button.frame = CGRect(x: 50, y: 200, width: 200, height: 50)
        button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)

        // UIView의 서브뷰로 추가
        view.addSubview(button)
    }

    @objc func buttonTapped() {
        print("Button was tapped!")
    }
}

• UIKit의 코드로는 아래와 같은 특징이 있다.
  • 개발자가 UIButton을 직접 생성하고, 각각의 속성을 설정하며, view에 추가하는 과정을 명령어 순서대로 작성한다.
  • buttonTapped 메서드가 버튼이 눌렸을 때 실행되도록 연결해 주어야 한다.
  • 개발자가 UI 요소의 상태 변화를 (명령을 통해) 직접 관리한다.
• 즉, 개발자가 UI의 상태 변화, 그에 대한 동작을 직접 명령하는 방식이다.

---

그럼 선언형 프로그래밍은?

한 정의에 따르면, 프로그램이 어떤 방법으로 해야 하는지를 나타내기보다 무엇과 같은지를 설명하는 경우에 "선언형"이라고 한다. 예를 들어, 웹 페이지는 선언형인데 웹페이지는 제목, 글꼴, 본문, 그림과 같이 "무엇"이 나타나야하는지를 묘사하는 것이지 "어떤 방법으로" 컴퓨터 화면에 페이지를 나타내야 하는지를 묘사하는 것이 아니기 때문이다. 이것은 전통적인 포트란과 C, 자바와 같은 명령형 프로그래밍 언어와는 다른 접근방식인데, 명령형 프로그래밍 언어는 프로그래머가 실행될 알고리즘을 명시해주어야 하는 것이다. 간단히 말하여, 명령형 프로그램은 알고리즘을 명시하고 목표는 명시하지 않는 데 반해 선언형 프로그램은 목표를 명시하고 알고리즘을 명시하지 않는 것이다.

뭔 소리니...

• “어떤 방법으로 해야 하는지” 보다 “무엇과 같은지를 설명하는 경우” 라는 말을 보고
  • 무엇을(What) 을 달성하고 싶은지를 기술하는 방식이라고 생각하는 게 좋을 거 같다.
• 즉, 프로그램이 최종적으로 어떤 상태가 되어야 하는지!

조금 모호하다 싶어 Swift 고차 함수를 사용한 예제를 가져와봤다.

func addElement (arr) {
    return arr.map((i) => i+1);
}

• 이거 가지고 선언형 프로그래밍이라 할 수 있는 가?
  • 위 코드를 보고, 우리는 어떤 과정을 통해 우리가 원하는 값에 도달하는지(How)가 궁금하지는 않을 것이다.
  • 무엇(What)이 일어날지에만 집중함으로 상태 변경에 대한 직접적인 간섭이 없음을 확인할 수 있다.

[SwiftUI의 예시 코드를 보자]

• 텍스트, 버튼, 버튼이 눌러졌을 때 UI의 최종 상태를 기술한다.
• UI 구성 요소와 데이터의 상태 변화 간의 연결을 명시적으로 설정할 필요가 없다. 대신, 상태가 변경되면 UI가 자동으로 업데이트된다.
  • 명령에 의해서 상태를 변경하는 것이 아니라 사용하는 곳에서 바뀔 행동과 상태를 선언해둠으로써 사용한다.

import SwiftUI

struct ContentView: View {
    @State private var buttonTapped = false

    var body: some View {
        VStack {
            Text("Hello, SwiftUI!")
                .font(.largeTitle)
                .foregroundColor(.black)

            Button(action: {
                buttonTapped = true
            }) {
                Text("Tap Me")
                    .padding()
            }

            if buttonTapped {
                Text("Button was tapped!")
            }
        }
        .padding()
    }
}

---

여기까지 글을 작성했을 때 문득 드는 생각은..

그럼 StoryBoard를 통해 UI요소를 배치하고 하는 것도 선언형인 것이 아닐까? 라는 궁금증이 들었다.

이에 대한 답은 아래와 같다.

• StoryBoard와 선언형 프로그래밍의 차이

	상태 관리 , 데이터 바인딩	명령형 코드와 결합
StoryBoard	UI 요소와 연결된 데이터를 변경하거나 UI 요소의 상태를 업데이트하기 위해서는 (명령으로만) 명시적으로 상태를 변경하고 이를 반영해야 함.	결국 UI요소는 IBOutlet, IBAction등과 연결이 되어야 함. 동작 제어에서 결국에 명령형 코드가 필요
SwiftUI	상태와 UI가 자동으로 동기화되고 알아서 UI를 업데이트함.	X

---

UIKit의 특징은 뭘까?

• UIKit은 iOS, iPadOS 또는 tvOS 앱의 핵심 인프라를 구성하는 데 사용할 수 있는 구성 요소를 포함하여 앱을 빌드하는 데 필요한 다양한 기능을 제공
• UIKit은 iOS 앱에서 Graphical하고 event-driven UI를 관리하고 구성하는 iOS의 기반이 되는 프레임워크
• 화면구성, 이벤트 관리 등 다양한 Object Library가 한데 모아져 있는 뼈대(Frame)

1. Info.plist - 필수적인 App Metadata
   • System은 앱의 configuration과 capabilities에 대한 정보를 app bundle에 있는 Info.plist 파일에서 가져옴
   • API_KEY 등을 여기다 담을 수 있음.
2. UIKit App의 코드 구조
   • UIKit은 system과의 상호작용, main event loop의 실행, 화면에 content 표시등 app에서 중요한 object들을 제공
   • UIKit app의 구조는 MVC 디자인 패턴으로 구현
   • MVC 디자인 패턴은 object의 목적에 따라 각각 나눠져 있습니다
   • Model object는 앱의 data와 business logic을 관리
   • View object는 data의 시각적인 표현을 제공
   • Controller object는 model과 view object의 브릿지 역할
     • 대표적인 역할로 둘 사이의 data 이동을 관리함.
     • ViewController도 여기에 포함되는 듯?

MVC 패턴에 대한 공식 자료

 

---

Cocoa Touch?

• Foundation, UIKit 프레임워크를 포함하는 프레임워크

---

StoryBoard?

• iOS Application의 UI흐름을 시각적으로 표현한 것
  • 화면의 내용과 화면, 화면 간의 연결을 보여줌
• storyboard
  • viewController + view로 이루어진 scene의 집합으로 구성
  • Scene들은 두 개의 viewController의 전환을 나타내는 segue 객체로 연결되어 있음
    • AppDelegate의 Scene과는 다름

• 우리가 이렇게 시각적으로 볼 수 있는 이유는 Xcode에서 storyboard를 위한 visual editor를 제공하기 때문
  • 이를 Interface Builder라고 함.
• .storyboard, .xib file을 직접 열어보면 xml 파일 형식으로 되어 있다.

 

---

참고 링크

명령형 프로그래밍 VS 선언형 프로그래밍

명령형 프로그래밍 VS 선언형 프로그래밍

 

UIKit vs SwiftUI 차이점

UIKit vs SwiftUI 차이점

 

UIKit | Apple Developer Documentation

UIKit | Apple Developer Documentation

 

[iOS/UIKit] UIKit과 Storyboard에 대한 이해, 그리고 AutoLayout의 필요성

[iOS/UIKit] UIKit과 Storyboard에 대한 이해, 그리고 AutoLayout의 필요성

Introduction

Introduction

Storyboard

Storyboard