WWDC 20 - Introduction to SwiftUI - (1)

---

• 세션보면서 정리한 내용입니다. 해석이 잘못된 경우가 있을수있으니 발견하시면 댓글로 남겨주시면 감사하겠습니다🙏🏻

---

• 해당세션의 내용이 너무나 풍부해서 글을 두개로 나누어서 작성했습니다! 

 

 

관련내용

• 선언형프로그래밍을 배워보자
• SwiftUI만드는방법을배워보자.
• 선언형의장점을알아보자.

 

요약 - 미췬…다최고

• SwiftUI Code, Preview , Canvas 로 구성된다.
• 뷰들에대해 다양한 메서드? 는 modifier로 불린다.
• Canvas안에 뷰,modifier를 추가하면 SwiftUICode에도 즉각반영되고, 반대도 마찬가지다.
• 코드내에서도 Command+click을 통해 다양한 기능들을 확인할수잇고, 즉각반영된다.
• NavigationView로 간단하게 만들수있으며,
• List( 테이블뷰처럼) 로 아주간단하게 만들수있다.
• 그리고 손쉽게 코드들을 캡슐화하여 Extracted하게 해주는 기능도있다…..
• Preview를 통해 테스트코드도 넣을수있으며, Preview를 통해 SwiftUI코드드를 실행시켜 Canvas에 나타나게해준다.
• 또한, 실시간으로 인터랙트하기위해 canvas에서 playbutton을 눌를수있다.
• 또한 급작스럽게변화가일어날경우 canvas는 pause상태가된다.
• @State변수를 통해 SwiftUI는 자동적으로 read-write상태를 observe한다.
• SwiftUI에서 View는 View는 protocol이며, 채택할경우 body를 구현해야하며, body가 view의 그자체가되고, 채택하는 타입은 struct타입이된다. 즉, 값타입이며, 스택에저장되고, 더이상 저장프로퍼티들을 상속받지않으며, 엄청가볍다는 뜻이다.

 

 

 

 

 

---

MuliPlatForm으로선택!!!


SwiftUI로 만들게되면 , iOS 용과 macOS용 폴더가생기고,
대부분의코드는 Shared에서 작성한다.


되게간단하지만 이게 다다.


바로 옆에나타난다.

• 옆에 프리뷰는 실시간으로반영된다.
• 프리뷰는 SwiftCode를 해석하여 반영이되고, SwiftUI코드를 사용하여 프리뷰를 생성해낸다. ( PreviewProvider )



👍추가하여 바로 캔버스 (canvas ) 에 드래그할수있다.





👍 그럼바로! 코드에도 나타난다!!
Vstack, HStack이있다.


👍 comand + 클릭하면, 리스트들이 나타나고, Embed in HStack을 클릭하면,



• 👍 이렇게 바뀐다!!
  

👍이렇게 Image를 넣을수있다>


👍Inspector도 바로볼수있다…….



👍이렇게 Alignemnt를 지정할수있다…


👍물론 캔버스canvas에서도 Inspector를 볼수있따…


👍폰트를 바꿀수있고…컬러도!!


👍그리고! SwiftUI코드에도 변경이됐다……

• .font 이러한 메서드를 modifiers 라고부른다.



👍forgroundcolor modifier도 추가하자 ( 폰트컬러 )


👍자, 이제 cell로 만들어주기위해, Embeded in List 를 클릭한다.



짜잔…….
delegate,datasource 등이필요가없다…



자그럼, Data를 넣어주도록하자.

각 cell들의 데이터를 의미하는 SandWich는 Identifiable 을 채택해야한다.

• Identifiable은 리스트가 새로운아이템이 들어오고 나가는지를 알수있게해준다 ?
• UUID타입인 id변수가중요하다.
  

SandWich 타입 배열을 추가한다.


👍 preView의 장점은, 테스트데이터를 넣어볼수가있다는점이다!!!



👍그리고, 내타입에 큰 변화를 부여할경우( sandwich프로퍼티추가 등 ) , Xcode는 preview를 stop한다. 내가 updating을 resume하기전까찌!
Resume눌러주면된다.


개쯘ㄷㅇ…
👍List ( ) 안에 배열을 넣어주었고,
그리고, List 클로저안에 배열의원소들을나타내는 sandwich이름으로 바꿔주낟.
Image, Text에 각각 이미지,제목등을 넣어주었다…….

이미지의크기에따라 셀의 크기가 자동적으로커진다.



👍만약, 어떤 Modifier를 사용할지모르겠다면,
Xcode library - Modifiers에서 필터로 확인할수있다………



👍우리는 이미지 corner를 적용하는 modifier를 사용할것이다.


이렇게, canvas에 드래그할수있다…….


바로반영됨!!!


 

 

 

 

 

👍NavigationView

cell을 선택하면 ㄷ 자세한 정보를알고싶으니,
NavigationView를 이용하자.

👍그냥간단하게,…. List 블록을 NavigationView안에넣으면된다……
또한, Title을 지정하기위해 navigationTItle modifier를 적용했ㄷ.



👍셀을 스택에추가하기위해 NavigationLink를 이용한다.

Link블록안에, NavigationLink블록을 추가하고, 그안에 cell내용들을넣어준다..
그럼 자동적으로canvas에 >가 생긴다….



cell이 잘 행동하느닞 확인하기위해,
canvas에서확인할수있다.

👍canvas 좌측 palybutton을 누르면, 실시간으로 interact하게해준다….!!


스크롤도가능해지고, 선택도할수있게된다…….!



그리고, 이제, sandwitch가 몇개인지도 구현하고싶다.
하지만, 지금 충분히 view code가 좀 큰거같다.
massive 한 view가되고싶지않기때문에, 분리하고싶다.
Xcode이것도 간단하게해준다..
Extract subview


👍이렇게…. ExtractedView로 따로 만들어준다..미친..


그리고 잘 작동하기위해 약간의 refactoring을 해준다.



샌드위치개수를 리스트 맨마지막에 넣어주고싶다.

그런데, SwiftUI는 동적,정적 컨텐츠를 리스트안에서 간단하게 mix할수잇다.
👍List - ForEach

• 이렇게, 동적컨텐츠들을 ForEach구문안에 표현하고,
  

👍그아래 바로 Text() 를 넣어줌으로써, List가장 하단에 row cell을 넣어주었다…….!!


TExt를 가운데로 정렬하고싶어서,
👍Spacer()를 이용했다.
HStack - Spcaer , Text , Spacer 로표현했다.

• SwiftUI에서 흔한 레이아웃으로 , toolbar에서 플렉서블한 space처럼 작동한다. 최대한 커진다는뜻.



디테일뷰를 만들어보자.

SwiftUI View로 만든다.



그럼 마찬가지로 자동적으로 코드, Preview코드, canvas가 나타난다.


디테일뷰에 들어갈 인풋을 정의하고 ,
Previews에 테스트코드를 넣어준다.



이미지를 넣어주었는데,
너무크게나온다. default로, 이미지 자체의 콘텐츠크기로 보여주기땓문이다.


resize modifier를 이용하여 resize할수있다.



스크린에 마주어서 resize되었다.


하지만 비율도 유지하고싶으므로,
Aspect ratio modifier를 이용할수있다.


.fill

• 전체프레임을 차지하며 확대하고,
  

.fit

• 전체프레임에 fit하게맞춰진다.
  

그리고,이제 디테일뷰를 navigation 스택에 붙여야한다.

👍NavigationLink ( destination에 초기화해준다……….)



마찬가지로 play button을 눌러 확인할수있따……..

navigationTitle를 추가해줬는데 canvas에 나타나지않는다.
왜냐, SandwichDetail 는 View자체이고, navigationView에 속하지않기때문이다.


👍하지만, Preview의 힘이 나타난다!!!

Preview에 NavigationView를 추가해주기만하면된다……..!


샌드위치선택에있어서, 소스의양이중요하다!
소스가얼마나있는지가 중요하단이말이다!

아래와같이 fill로 보면 소스가얼마나있는지 자세히볼수있딴말이다!
🤔즉, fill, fit 을 앱러닝중에 어떻게 동적으로변경할수있냐말이다?!

• 이를 이해하기위햇너느 SwiftU에서 View가 어떻게 왜 동작하는지 알필요가있다.



 

 

 

 

 

 

 



View의 작동원리

View 프로토콜을 채택하는 struct타입이다.

• UIView를 상속하여 class타입으로사용하기보다는!!!
• 즉, 어떠한 저장프로퍼티들을 상속하지않고, 스택에 저장되며 value로써 전달된다.
• 또한, SwiftUI는 뷰계층구조를 붕괴하고, 렌더링을위한 효과적인 데이터구조로 만들었다.
• 즉 Kyle이 말하고싶은점은, 극도로 가볍다는 점이다.
• SwiftUI코드에서는 리팩토링을 망설일필요가없다. subview를 추출하고하는것은 런타임오버헤드가없기때문이다.
  

👍전통적인 UI와 SwiftUI에서 view는 공통점이있는데, 그것은 UI의 조각을 정의하는 것이다.
SwiftUI에서는 View protocol을 채택하면, body 라는 프로퍼티를 구현해야한다.
body가 view그 자체가된다.



 

 

framekwork는 언제 새롭게 렌더링할지를 알고있다.
view가 dependencies를 정의하기때문이다.

자, 그럼 여기서 탭할경우 fill, fit로 되게 바꿔보자.

 

 

👍@State

우선, state 변수가 필요하다. 줌됐느지 아닌지를 판단하기위해.
그리고, SwiftUI는 state 변수를 볼때, persistent storage에 저장한다.
그리고


아래와같이, zoomed일때, 아닐때를 filt, fill를 렌더링하게해준다.



또한, zoom이바뀌어야하므로, tap할때 바뀌도록하기위해 onTapGesture modifier를 등록한다.



 

 

 

탭할때 무슨일이일어난걸까?

@State 변수의 특별한프로퍼티중 하나는,
👍SwiftUI는 해당변수가 read, written 될때를 observe할 수 있다는 점이다…..
SwiftUI는 body내에서 zoomed가 read되어지는것을 알고, 그것에따라 렌더링하도록 하게 안다.
즉, 해당변수가변할떄, framework는 body가 다시 렌더링하도록 하게한다.

@State는 Source of Truth라고 불린다.

aspectRatioView는 아래와같이 간단하게 표현할수있다.


모든 프로퍼티들은 source of Truthe 이거나, dereived value로 정의할수있다.
그러므로,여기서 zoomed - state 변수는 👍source of truth이다.
contentMode는 👍derived Value이다.

그러므로, 이러한 메커니즘이 SwiftUI에서는 derived value는 항상 최신으로 유지하게 해준다.

 

Source of Truth

 

모든 state 변수들은 read-write Source of True이다.
plain한 old 프로퍼티들은 read-only derived value이다.

여기서 다루지는않지만, SwiftUI는 binding 이라는 것을 만들었다. - read-write derived value로써.

constant는 read-only soruce of Truth가 되고, preview에서 테스트코드로넣어주는것이 constant의 예라고할수있다.



만약 이들의 차이를 잘모르겠다면, 언제어떤것을 사용할지에 대한 영감을줄수있는세션을준비했다.