[iOS Swift] SwiftUI란? UIkit vs SwiftUI 비교

SwiftUI란?

애플의 디자인 프레임워크의 변화는 빠르게 진행되었습니다. 애플은 2019년 WWDC에서 애플은 SwiftUI라는 새로운 디자인 프레임워크를 소개합니다. 더 빠르고 쉽게 개발을 할 수 있도록 하기 위해 개발된 SwiftUI는 실시간 테스트 기능과 선언적 구문 그리고 데이터주도 기반을 철학을 가지고 있습니다. 

SwiftUI의 특징적인 부분은 선언적 구문, 데이터 바인딩, 프리뷰 기능, 애니메이션 기능으로 압축해서 살펴볼 수 있습니다. 

1. 선언적 구문(Declarative Syntax)

SwiftUI는 선언적 구문을 사용합니다. 선언적 구문의 반대는 명령적(Imperative) 구문인데요, 둘의 차이점을 간단하게 비교하면 다음과 같습니다.

선언적 구문	명령적 구문
- 코딩을 할 때 무엇을 할지에 중점을 두는 코딩 방식 - 원하는 결과를 명시적으로 선언하는 방식	- 작업을 어떻게 수행할지 중점을 두는 코딩 방식 - 작업 순서에 따라 순차적인 코딩 진행

글로만 봐서는 이해가 어렵습니다. 아래 코드를 보시죠.

Text("Hello, SwiftUI!")

위의 코드를 닥 보면 "아 Hello SwiftUI"라는 문자열을 출력하는 구나라는 것을 알 수 있습니다. 이처러 명시적으로 프로그램이 무엇을 해야 하는지 선언하는 방식이 선언적 구문(Declarative)입니다.

var label = UILabel()
label.text = "Hello, SwiftUI!"

위의 코드는 UILabel() 인스턴스를 생성하고 text 프로퍼티에 문자열을 담고 있습니다. 이처럼 프로그램이 어떻게 문자열을 출력하는지에 중점을 두는 방식이 선언적 구문(Imperative)입니다. 

 

 

2. 데이터 바인딩

SwiftUI에서는 앱 데이터와 사용자 인터페이스 간 강력한 바인딩 기능을 제공하고 있습니다. 사용자 인터페이스에서 변경된 데이터는 UI에 반영되어 자동으로 업데이트 되는 형식을 취하고 있습니다. @State, @Binding을 가지고 UI에 변경된 데이터를 실시간을 관리할 수 있게 됩니다. 

struct ChildView: View {
    @Binding var counter: Int
    
    var body: some View {
        Text("Counter in child view: \(counter)")
        Button("Increment in child view") {
            counter += 1
        }
    }
}

struct ParentView: View {
    @State private var counter = 0
    
    var body: some View {
        VStack {
            ChildView(counter: $counter)
            Text("Counter in parent view: \(counter)")
        }
    }
}

부모 뷰에서 관리하고 있는 counter 변수는 데이터바인딩 되어 있습니다. 자식 뷰에 이 데이터를 전달해주면 자식 뷰에서 counter 변수가 변경되어도 부모뷰의 counter 또한 변경됩니다. SwiftUI에서는 데이터를 Single Source of Truth으로 관리할 수 있습니다. 

3. 애니메이션 기능

SwiftUI에서 제공되는 애니메이션 기능은 간단한 Modifier를 붙여서 손쉽게 구현할 수 있습니다. 

struct ContentView: View {
    @State private var rotation: Double = 0.0
    
    var body: some View {
        Image("logo")
            .rotationEffect(Angle(degrees: rotation))
            .onTapGesture {
                withAnimation {
                    rotation += 45.0
                }
            }
    }
}

 

SwiftUI vs UIKit

SwiftUI가 등장하기 전 까지는 UIKit 기반의 디자인 설계가 필요했습니다. 인터페이스 빌더(Interface Builder)로 스토리보드를 구성하고 각각의 버튼과 텍스트를 코드와 연결하였습니다. 각 컴포넌트의 크기는 Constraint로 지정하고 속성은 Inspector 영역에서 세부적으로 수정하는 방식으로 디자인을 설계합니다. 

SwiftUI는 선언적 구문을 사용해서 레이아웃은 레이아웃 매니저(VStack, HStack)으로 지정하고 세부 속성은 수정자(Modifier)를 통해서 간결하고 간단한 방식으로 대체되었습니다. 

	SwiftUI	UIKit
UI정의	선언적	명령적
상태변화	@State, @Binding 프로퍼티 래퍼 사용	메인스레드에서 명시적으로 UI 관리
Cross Platform	iOS padOS MacOS tvOS watchOS 지원	플랫폼 별로 별도 인터페이스 구현
미리보기 기능	지원	미지원
애니메이션	애니메이션 API 사용	Core Animation 사용
코드 간결성	선언적 구문으로 코드가 간결함	많은 양의 코드 사용

현재 iOS 최신 버전은 17인데요 이전 버전의 디바이스를 타게팅 하는 프로젝트가 아니고서야 SwiftUI를 사용해서 앱 개발을 진행하는게 맞습니다. 다양한 플랫폼을 지원하고 선언적 구문으로 더 간결한 코드로 동일한 결과를 얻을 수 있습니다. 

 

 

다만 기존 진행하고 있는 프로젝트에서 레거시 코드가 많다면 한번에 SwiftUI로의 대체는 불가능합니다. 사실 UIKit과 SwiftUI는 배타적인 성격을 가지고 있지는 않기 때문에 SwiftUI 프로젝트에서도 웹 뷰를 띄운다거나 지도뷰를 띄우기 위해서는 여전히 UIKit을 사용해야 합니다. 복잡한 레이아웃을 설계해야 하는 경우에도 UIKit이 사용됩니다. 

 

 

🚀️ 도움이 되셨다면 구독과 좋아요 부탁드립니다 👍️

 

 

[iOS Swift] 스위프트에서 Error Handling 하는 방법

 

[iOS Swift5] 열거형 구조체 기본 기초

 

[iOS Swift5] 연산자와 표현식