2019년 애플의 WorldWide Developers Conference에서 처음 소개된 SwiftUI는 모든 애플 운영체제용 앱을 개발하는 데 있어서 완전히 새로운 방법을 제공한다.

SwiftUI의 기본적인 목적은 앱 개발을 더 쉽고 빠르게 함과 동시에 소프트웨어를 개발할 때 일반적으로 발생하는 버그들을 줄이는 것이다.
또한, 개발 과정에서도 앱의 라이브 프리뷰 기능을 이용하여 SwiftUI 프로젝트를 실시간으로 테스트할 수 있게 한다.

SwiftUI의 선언적 구문

UIKit과 인터페이스 빌더를 사용하여 사용자 인터페이스 레이아웃을 설계하고 필요한 동작을 구현하는 것과는 완전히 다른 방법인 선언적 구문(declairative syntax)이 SwiftUI에 도입되었다.
이것은 단순하면서 직관적인 구문을 이용하여 화면을 기술할 수 있게 해 준다.

이 과정에서 기본적으로 레이아웃에 포함될 컴포넌트들을 선언하고, 그것들이 포함될 레이아웃 메니지 종류 (VStack, HStack, Form, List 등)를 명시하고, 속성을 설정하기 위해 수정자(modifier)를 사용한다.
이렇게 선언하고 난 후 레이아웃의 위치와 constraint 그리고 렌더링 방법에 대한 모든 복잡한 세부 사항은 SwiftUI가 자동으로 처리한다.

SwiftUI 선언은 계층적으로 구조화되어 있다. 따라서 복잡한 뷰를 보다 쉽게 생성할 수 있다.

SwiftUI는 데이터 주도적

SwiftUI 이전에는 앱 내에 있는 데이터의 현재 값을 검사하려면 그에 대한 코드를 앱에 포함해야 했다.
시간에 지남에 따라 데이터가 변한다면 사용자 인터페이스가 데이터의 최신 상태를 항상 반영하도록 하는 코드를 작성하거나, 데이터가 변경되었는지 주기적으로 검사하는 코드를 작성하는 것, 그리고 갱신 메뉴를 제공해야 했다.
이러한 데이터 소스를 앱의 여러 영역에서 사용할 경우 소스 코드의 복잡도가 증가한다.

SwiftUI는 앱의 데이터 모델과 사용자 인터페이스 컴포넌트, 그리고 기능을 제공하는 로직을 binding 하는 여러 방법으로 복잡도를 해결한다.
데이터 주도로 구현하면 데이터 모델은 앱의 다른 부분에서 subscibe 할 수 데이터 변수는 publish 하게 된다. (publisher – subsciber)
이러한 방법을 통해 데이터가 변경되었다는 사실을 모든 구독자에게 자동으로 알릴 수 있다.
만약 사용자 인터페이스 컴포넌트와 데이터 모델 간에 바인딩이 된다면, 추가적인 코드를 작성하지 않아도 모든 데이터의 변경 사항을 SwiftUI가 사용자 인터페이스에 자동으로 반영할 것이다.

그렇다면, SwiftUI vs UIKit?

사실, UIView와 SwiftUI를 함께 사용할 수 있는 방법은 다양하게 존재한다.

SwiftUI는 빠르고 효율적인 앱 개발 환경을 제공할 뿐만 아니라 코드를 크게 변경하지 않아도 다양한 애플 플랫폼에서 동일한 앱을 사용할 수 있게 한다.
하지만 지도 또는 웹 뷰를 통합해야 하는 특정 기능은 여전히 UIKit을 사용해야 한다.

또한, 매우 복잡한 UI 레이아웃을 설계하는 경우에 SwiftUI 레이아웃 컨테이너 뷰 사용이 만족스럽지 않을 수 있다.
이런 상황에서는 인터페이스 빌더를 사용해야 할 수도 있다.

그리고 간단한 SwiftUI 예제

import SwiftUI

struct ContentView: View {
@State var show = false

var body: some View {

VStack {
Text("Spring is coming")
.font(.largeTitle)
.fontWeight(.semibold)
.foregroundColor(Color.black)
.padding(4)

Image("ui")
.frame(width: show ? 414 : 300, height: show ? 600 : 300)
.clipped()
.cornerRadius(show ? 0 : 30)
.shadow(radius: 30)
.blur(radius: show ? 0 : 30)
.animation(.spring())

Text("focused on Spring")
.font(.subheadline)
.fontWeight(.regular)
.foregroundColor(Color.gray)
.scaleEffect(show ? 2 : 1)
.animation(.spring())
.padding(4)

Button(action: {
withAnimation {
self.show.toggle()
}
}) {
Text("Animate")
}
}
}
}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

@State property wrapper는 해당 프로퍼티의 값이 항상 바뀔 수 있다는 것을 의미한다.
해당 변수의 state가 변경이 되면 SwiftUI는 view가 state의 정보를 반영할 수 있도록 자동으로 변경사항을 반영하여 view를 reload한다.

• 이 게시글은 HyunJi에 의해 4 years, 8 months 전에 수정됐습니다.
• 이 게시글은 HyunJi에 의해 4 years, 8 months 전에 수정됐습니다.
• 이 게시글은 HyunJi에 의해 4 years, 8 months 전에 수정됐습니다.
• 이 게시글은 HyunJi에 의해 4 years, 8 months 전에 수정됐습니다.