[iOS] SwiftUI vs UIKit, SwiftUI 특징

일단 UIKit은 모두 클래스였는데 SwiftUI는 구조체기 때문에 처리속도가 굉장이 빠르다.

 

명령형 프로그래밍은 프로그램의 상태와 결과를 변경 및 달성하기 위하여 연산들의 순서적인 흐름을 명시적으로 작성하는 특징이 있지만, 선언형 프로그래밍은 무엇을 해야 하는지(결과)를 기술하고, 어떻게 수행할지는 시스템에 맡기는 방식이다. 프로그래머는 원하는 결과를 선언하며, 세부적인 수행 절차는 기술하지 않는다.

결국 높은 수준의 추상화를 통해 코드를 이해하기 쉽다. (수행은 시스템이 알아서 해주기 때문에)

 

 

예를 들어, TextLabel의 텍스트 내용을 변경한다고 치면, 앞서 스토리보드를 통한 UIKit은 직접 속성을 업데이트하는 명령을 추가했었다. 그러나 SwiftUI에서는 상태 변수를 사용해서 자동으로 업데이트를 해준다.

• UIKit: 레이블의 텍스트 변경을 위해 직접 label.text 속성을 업데이트하는 명령을 추가
• SwiftUI: 상태 변수(@State)를 사용하여 UI 상태를 관리. 상태가 변경되면 SwiftUI가 자동으로 UI를 업데이트

이제까지 명령형인 UIKit으로 프로젝트들을 생성하고 연습을 해왔었는데,

이제는 선언형인 SwiftUI로 해보려고 한다.

 

 

 

 

SwiftUI와 UIKit를 비교해보면 아래와 같다. 

App.Swift

처음 스유 앱을 생성하고서 

WindowGroup은 제일 먼저 실행되는 뷰이다.

ContentView()는 진입점을 말한다. 일반적으로 ContentView()를 root view로 쓴다.

 

뷰의 계층구조를 보면 아래와 같이 구성되어있는데, 일단 아래 그림에서 WindowGroup, ContentView까지 나와있는 것이다. 궁극적으로는 하나의 뷰가 출력되도록 하는것인데 참고로 스유는 클로저를 굉장히 많이 사용한다. 

 

ContentView.swift

보면 계층적 구조로 더 심플하게 된 것을 볼 수 있다.

body는 some View 타입인데, "some"이 붙은건 opaque 타입이다. generic의 반대 타입이라고 생각하면 된다.

 

opaque type?

Swift 는 값의 타입에 대한 자세한 내용을 숨기기위한 두가지 방법을 제공합니다: 불투명한 타입 (opaque type) 과 박스형 프로토콜 타입 (boxed protocol type).

 

 

밑의 #Preview는 미리보기를 담당하는 코드인데, #이 붙은 것은 매크로라고 해서, 반복적인 동작을 계속 실행해주는 역할을 한다. 주석처리를 하고 run을 해도 정상적으로 동작한다.

 

참고

시뮬레이터의 아래쪽에 보면, 세 개의 버튼이 있는 것이 보인다: Live, Selectable, Variants 인데 보통은 Live 모드로 놓고 많이 개발한다.

Variants의 경우 모드를 클릭하면 세 가지 옵션이 나온다.

 

 

이 중 Dynamic Type Variants는 iOS 설정에 들어가보면 7개의 다른 크기의 폰트들을 설정할 수 있는 옵션을 제공하는데 이를 미리 시뮬레이터로 볼 때 유용하다. 

 

 

다시 돌아가서, 아래와 같이 선언형으로 손쉽게 입력해줄 수 있다는 점이 좋다.

 

 

Button 생성 - 클로저

앞서 후행클로저가 매우 많이 사용된다고 했는데, 여기 파란 블럭에서 엔터를 누르면 후행 클로저로 바뀌는 것을 볼 수 있다.

 

VStack

vertical이므로, 컴포넌트를 가로로 배치하겠다는 뜻이다. (따라서, 탑처럼 쌓이게 된다.)

새로운 컴포넌트를 생성할수록 탑처럼 쌓이는 것을 볼 수 있다.

 

참고로, 임베딩하고 싶은 컴포넌트(Button) 위에 마우스 우클릭을 하면 Embed in...이라고 하고 잘 나오는데 멀티플은 안되고(다중선택은 안되고) 하나씩만 할 수 있다는 점

 

 

HStack

컴포넌트들을 horizontal, 즉 세로로 배열하므로 도미노처럼 쌓이게 된다.

위의 것을 그대로 VStack -> HStack으로 바꾸면 이렇게 나오게 된다.

 

 

 

Stack Alignment 옵션

스택을 선언할 때, 보면 앞의 두 개의 값은 옵셔널인 것을 알 수 있고(희미하게 쓰임), 그리고 뒤의 content()는 클로저인 것을 알 수 있다. (따라서 엔터를 치고 후행클로저로 사용해왔던 것) 

 

이 말은, 스택끼리 alignment를 할 수도 있다. 이렇게 옵션을 넣어줄때는 아래와 같이 스택 옆에 괄호를 열고 옵션을 넣어준다.

 

 

 

ZStack

위에 겹쳐서 쌓는 것이다.

ZStack을 위해 노란색 박스를 만들어준다.

 

그리고 후에 빨간색 박스를 만들었다. 보면 제일 최근으로 만드는 빨간 박스가 제일 위에 올라오는것이 보인다.

 

뷰 계층구조

ZStack구조를 별도로 분리하기 위해서 User Interface 카테고리의 SwiftUI View를 선택해 새 파일을 생성해준다. (sampleview.swift)

 

더 잘보이게 하기 위해 노란색 텍스트박스는 크기를 더 크게 키웠다.

 

여기서, #Preview 안의 SampleView() 밑에 ContentView()를 넣어본다.

선언한 그대로 ZStack() 을 구현한 SampleView 밑에 ContentView가 나타나는 것이 보인다.

 

이 순서를 바꾸면?

제일 아래로 내려가겠지..

 

따라서 SwiftUI를 사용하면 뷰를 쪼개서 별도로 구현하고, 다시 조합하고 이런식으로 해서 아주 손쉽게 사용할 수 있다.