[WWDC19] SwiftUI Essentials

이글은 WWDC19 SwiftUI Essentials 을 보고 정리 한 글 입니다.

🎁 intro

SwiftUI 는 바퀴를 재발명하려고 하지 않는다. 우리가 전에 UIKit 에서 사용하던 다양한 컴포넌트들 그리고 다양항 기능들이 이미 모두 들어가 있다. 그저 방법을 바꿨을 뿐이다.

기본적인 것은 쉽게 구현할 수 있게 도와주고 자유롭게 커스텀 할 수 있도록 만들었다고 한다.

🥑 View and modifiers

아보카도 토스트 주문 앱을 만들면서 SwiftUI와 친해져 보자.

이 화면에서 보이는 모든 것은 View 로 구성되어 있다.

이 말을 이해하기 위해서 이야기를 더 들어보자.

일단 UIKit 에는 UIView 가 있고 AppKit 에는 NSView 가 있다. SwiftUI 에는 View 가 있다!

SwiftUI 에서 이런 식으로 계층구조와 코드가 작성된다.

아직 SwiftUI 를 잘 모른다고 해도 UIKit 을 안다면 여기서 이상한 점을 발견할 수 있다.

addSubView 같은 함수가 없다는 것이다.

계층 구조를 위해서 그 함수가 필요한데 말이다.

왜냐하면 SwiftUI는 View 계층 구조를 하나씩 구축하는 것이 아니라, 완성된 구조체를 만들고 그것을 초기화 하기 때문이다.

이 말은 즉

그건 UIKit 은 imperatively(명시적으로) 하게 작동하고 SwiftUI 는 declaratively(선언적으로) 하게 작동하기 때문이다.

(하나도 이해 안되는것이 정상 계속 읽어보자...)

🍞 imperatively VS declaratively

그건 UIKit 은 imperatively(명시적으로) 하게 작동하고 SwiftUI 는 declaratively(선언적으로) 하게 작동하기 때문이다.

명시적이고 선언적인게 무엇인지 알기 위한 예시를 보자. 명시적으로 아보카도 토스트를 만들어 보자.

명시적으로 아보카도 토스트를 만든다는 것은 친구한테 전화로 어떻게 아보카도 토스트를 만드는지 설명하는 것과 같다.

그럼 선언적으로 아보카도 토스트를 만드는 것을 보자.

선언적으로 아보카도 토스트를 만드는 것은 아보카도 장인에게 아보카도 토스트를 주문하는 것이다.

이제 다시 코드를 하나한 뜯어보자. SwiftUI 가 그 아보카도 장인 역할이다! 알아서 해줄 것이다.

Contianer 에 closure 는 ViewBuilder 라는 아주 특수한 녀석으로 되어 있다. 일단은 그 클로저 안에 선언을 하기만 하면 View 에서 볼 수 있다는 것을 알아 두면 된다.

Container 에 대표적인 예를 VStack 을 보자. 안에 다른 View 들이 들어가 있다. (SwiftUI 에서는 Image 도 Text 도 View 이다.)

좀 더 깊은 이해를 위해 제 VStack 의 내부구현을 살펴보자.

content 라는 파라미터가 있고, 클로저 타입을 받고 있지만, @ViewBuilder 가 붙어 있다.

Swift 컴파일러가 이 클로저안에 있는 모든 뷰의 값을 모아서 하나의 VStack 으로 다시 리턴하는 법을 알고 있다.

우리는 이 클로저 안에 Text Toggle Stepper 등 어떤 종류의 View 든 넣을 수 있다.

익숙하지 않은 문법인 $ (달러싸인) 이 있다. 달러싸인은 일반적인 값 대신 바인딩 값을 전달하고 있다는 것을 의미한다.

@State를 사용한 proerty를 SwiftUI가 보면, 자동으로 Scene 뒤에서 지속 상태를 생성 및 관리한 다음에 이 속성을 통해 해당 상태값을 노출한다.

스테퍼를 누를 때 값을 수정 할 수도 있어야 하기 때문에, 바인딩한 값을 받는다.

바인딩에 대해서 자세한 것을 알고 싶으면 SwiftUI Data Flow WWDC 를 시청하라고 한다.

🍞 modifier

SwiftUI는 View 계층 구조를 하나씩 구축하는 것이 아니라, 완성된 구조체를 만들고 그것을 초기화 한다.

라는 말을 이해하려면 modifier 에 대해서 알아야 한다.

SwiftUI 에서 modifier 을 이용해 새로운 뷰를 만든다.

예시를 보자. .modifer 를 사용해서 새로운 개념을 계속해서 추가할 수 있다. chaining도 할 수 있다!

UIKit을 계속 썻다면 이상하다고 생각 할 수 있다. 왜냐하면 여태껏 계층구조를 가볍게 유지하도록 했으니까.

그러나 우리는 선언적 코드를 작성하고 있다. 선언적 코드는 다르게 작동한다. 마치 고차함수의 return 값 여러개를 체이닝 하듯이 모든 modifier 는 View 를 받아서 View 를 리턴한다.

그래서 계층 구조를 하나씩 구축하는 것이 아니라, 완성된 구조체를 만들고 그것을 초기화 한다. 라는 말이 나오는 것이다. addSubView 가 필요 없는 이유도 이미 모든 SubView 들을 가진 상태에서 초기화가 일어나기 때문이다.

SwiftUI 를 만들면서 많은 고민을 했고 Scene 에서 rendering 시스템에서 최적화를 해주기 때문에, 성능에 대한 문제는 걱정할 필요가 없다고 한다.

🤗 modifier 의 이점 🤗

1. 순서를 명시적으로 알 수 있다.
2. View 간에 공유가 가능하다.

순서를 명시적으로 알 수 있다. 우리는 다양한 feature 들이 적용되는 순서를 정해줄 수 있다.

위의 이미지는 백그라운드를 먼저 주고 패딩을 준것 이고

위의 이미지는 패팅을 먼저 주고 백그라운드를 준 것 이다.

두개의 결과가 다른것은 modifier가 순서대로 작동하기 때문이다.

이게 만약의 modifier 가 아닌, 텍스트의 속성이라고 한다면 문서를 읽거나 실험을 해보지 않고는 어떤 속성이 먼저 적용되는지 알 수 가 없다.

modifier 를 순서대로 연결해서 명시적으로 순서를 알려주고 있는 것이다.

View 간에 공유가 가능하다.

각각의 View 에 opacity modifier 를 설정해 줄 수 있다. 같은 것은 반복해서 다니 코드가 지저분하다.

위와 같이 VStack 에 opacity modifier 를 설정하면 하위 모든 뷰에도 적용이 되어서 위의 코드와 같은 형태를 볼 수 있는데 코드는 더 깔끔해 진다!

🥑 Building custom Views