SwiftUI란
SwiftUI는 모든 애플 플랫폼에서 사용자 인터페이스를 만들 수 있게 해주는 새로운 개발 패러다임이다. 기존의 사용하던 스토리보드는 시간이 지나면 용량이 너무 커지고 협업 및 유지보수를 할 때 매우 불편해서 코드로 작성하는 개발자와 스토리보드로 UI를 작성하는 개발자가 나뉘었다. SwiftUI는 코드를 작성하는 동시에 디자인 인터페이스가 생성되고 요소들이 코드로 생성되기 때문에 스토리보드의 XML방식을 사용하지 않아도 된다.
Multi-platfrom project
멀티 플랫폼 앱 템플릿은 SwiftUI 및 새로운 라이프 사이클 API를 사용하여 IOS, iPadOS 및 macOS간에 코드를 쉽게 공유할 수 있도록 도와주는 프로젝트이다. 프로젝트 구조는 모든 플랫폼에서 코드 공유를 권장하는 동시에 앱에 적합한 경우 각 플랫폼에 대한 맞춤형 환경을 만들어 준다.
—생성
Choose a template 창에서 Multiplatform 탭에 있는 APP을 선택한다.
— 프로젝트 구조
구조는 크게 Shared, IOS, macOS, Product 폴더로 구성되어 있다.
Shared에는 project.swift와 ContentView.swift, Assets 폴더가 있다.
iOS, macOS에 맞는 Info.plist와 entitlements가 있는 폴더가 OS별로 따로 구성되어 있다.
— project.swift
import SwiftUI
@main
struct swiftUI_tutorialApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
- App의 구조와 동작을 나타내는 타입이다.
- body라는 프로퍼티가 들어가야하고 body는 Scene 프로토콜을 준수하는 인스턴스를 반환한다.
- @main : App의 진입점을 제공하기위한 키워드
- WindowGroup : SwiftUI가 기본적으로 제공하는 primitive scene type중 하나로 iPad OS, macOS, iOS 등 여러 window를 지원하는 플랫폼에서 여러 자식을 인스턴화 할 수 있다.
—ContentView.swift
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello, world!")
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
ContentView
- 최상단에 SwiftUI를 선언하여 프레임워크를 가져온다.
- ContentView는 View를 상속받는 구조체이다.
- View는 반드시 body라는 View 타입의 변수가 선언되어야한다.(없으면 에러 발생!)
ContentView_Previews
- 실제 앱에는 적용되지 않지만 Xcode의 Canvas 기능을 위한 Preview Layout이다.
- View를 실시간으로 확인이 가능하다.
MVVM 패턴
SwiftUI는 MVVM 디자인 패턴을 채용하였다. MVVM은 사용자 인터페이스의 개발을 비즈니스 로직 또는 백-엔드 로직으로부터 분리시켜서 뷰가 어느 특정한 모델 플랫폼에 종속되지 않도록 해준다. 이렇게 UI와 백-엔드 로직을 분리하게 된다면 유지보수 및 재사용이 쉬워진다.
—구성요소
- 모델(Model)
모델은 실제 상태 내용을 표현하는, 도메인 모델을 참조한다. 앱에서 사용할 데이터에 관련된 행위와 데이터를 다룬다.
- 뷰(View)
UI에 관련된 것을 다룬다. 스크린의 구조, 레이아웃, 형태등을 정의한다. 사용자와 뷰의 상호작용을 받아서 이에 대한 처리를 데이터 바인딩을 통해 뷰 모델로 전달한다.
- 뷰 모델(View Model)
뷰가 사용할 메서드를 구현하고, 뷰에게 상태변화를 알려준다. UI에서 제공할 기능을 정의하고 데이터를 가공해서 뷰에게 제공한다.
- 바인더(Binder)
데이터 변경에 즉각적으로 뷰가 반응하고 업데이트 하게 해준다. 양방향으로 작동하며, View Model에 의해 데이터가 변경되어도 View가 업데이트 되고 View에서 데이터를 변경해도 Model에게 전달되어 기존 데이터가 변하게 된다.
Uploaded by Notion2Tistory v1.1.0