[Swift] SwiftUI란?

SwiftUI는 최소한의 코드로 Swift의 성능을 사용해 모든 Apple 플랫폼 전반에서 앱을 빌드할 수 있게 한다.

SwiftUI는 다음과 같은 특징이 있다.

 

선언적 구문

SwiftUI는 선언적 구문을 사용하므로 사용자 인터페이스의 기능을 명시하기만 하면 된다. 예를 들어, 텍스트 필드로 구성된 항목의 목록을 작성하고 각 필드의 정렬, 색상을 설명하면 된다.

코드가 간단하고 가독성이 향상되어 시간이 절약되고 유지 관리가 용이하다.

import SwiftUI

struct AlbumDetail: View {
	var album: Album

	var body: some View {
		List(album.songs) { song in 
			HStack {
				Image(album.cover)
				VStack(alignment: .leading) {
					Text(song.title)
					Text(song.artist.name)
						.foregroundStyle(.secondary)
				}
			}
		}
	}
}

 

이러한 선언적 스타일은 애니메이션과 같은 복잡한 개념에도 적용된다. 코드 몇 줄으로 애니메이션을 손쉽게 추가하고 바로 사용할 수 있다. 이와 같이 간단한 애니메이션을 통해 앱에 생동감을 넣어줄 수 있다.

 

디자인 도구

Xcode에는 SwiftUI를 사용하여 드래그 앤 드롭만큼 간단하게 인터페이스를 빌드할 수 있는 직관적인 디자인 도구가 포함되어 있다. 디자인 캔버스에서 작업하면 편집하는 모든 내용이 옆에 표시되는 편집기의 코드와 완벽하게 동기화된다. 코드를 입력하는 동시에 미리보기로 바로 볼 수 있고 라이트 모드 및 다크 모드와 같이 다양한 구성에서 UI를 확인할 수도 있다. Xcode는 변경 사항을 즉시 재컴파일하고 실행 중인 앱 버전에 삽입하므로 상시 확인 및 편집이 가능하다.

 

 

UIKit 및 AppKit과의 호환

SwiftUI는 UIKit 및 AppKit과 호환되도록 설계되었기 때문에 기존 앱에 쉽게 추가로 적용할 수 있다. 사용자 인터페이스의 새로운 부분을 구축하거나 기존 사용자 인터페이스를 다시 빌드해야하는 경우 나머지 코드베이스를 유지하면서 SwiftUI를 사용할 수 있다.

SwiftUI에서 제공하지 않는 인터페이스 요소를 사용하려는 경우 SwiftUI를 UIKit 및 AppKit과 함께 사용하여 활용할 수 있다.

 

 

SwiftUI의 구성요소

ContentView : SwiftUI로 프로젝트를 만들었을 때의 기본 화면같은 View

PreView : 미리보기 같은 기능. Resume 버튼을 누르면 Preview가 활성화된다.

 

ContentView.swift 파일에는 총 두가지 구조체로 구성되어 있다.

ContentView: View 는 화면을 그리는 구조체이고,

ContentView_Previews는 Preview를 그리는 구조체이다. 이 파일을 없애면 Preview가 사라진다.

 

또한 인스펙터 영역에서 스토리보드처럼 수정할 수 있는데, 이 때 코드가 자동으로 수정된다.

 

struct ContentView: View {
    var body: some View {
        Text("Hello!")
           .font(.body)
           .fontWeight(.bold)
           .padding()
    }
}

이렇게 .을 통해서 속성을 나열하는 것을 SwiftUI에서는 modifier라고 부른다.

 

ContentView는 body라는 프로퍼티를 가지는데, 이 body는 단 하나의 View만 리턴해야 한다.

-> 따라서 여러 뷰(여러 버튼이나, 텍스트 등)을 리턴하고자 할 때에는 Stack, Group을 사용하여 구성할 수 있다!

 

View의 생애주기 관리는 .onAppear, .onDisappear modifier를 통해 사용할 수 있다.

 

 

참고

- https://developer.apple.com/kr/xcode/swiftui/

SwiftUI 개요 - Xcode - Apple Developer

- https://babbab2.tistory.com/157