WWDC 20 - Introduction to SwiftUI - (2)

---

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

---

 

WWDC 20 - Introduction to SwiftUI (1) 을 먼저 보고오시는게 좋습니다! ( 내용이 많아서 두개로 나누어서 작성했습니다. ) 

 

 

요약

• SwiftUI는 많은 의존성들을 대신해준다. 그러므로 버그를줄여준다!
• Safe area modifier 로써, .edgesIgnoringSafeArea(.bottom)이있다.
• 아주간단하게 withAnimcation { } 블록으로 쉽게애니메이션이가능하다.
• Label에서 이미지와 텍스트를 같이넣어줄수있다. 자동적으로 이미지는 크기에맞춰진다.
• spacer를이용하여 센터를맞춰줄수있따.
  • 줌에이의해 spacer간격을줄여주기위해 minimumWidth가능
• 또한 줌하지않고, 매울때만 나타나도록하기위해 if문으로 나타낼수있다.
• 또한 canvas를 여러개나타내어 각각 테스트할수도있다! ( duplicate preview )
  • 자동으로 preview에 코드가생성됨 - Group으로묶임.
• 왠만하면 자동으로 애니메이션전환이되는데, 이것도커스텀이가능하다.
  • .transition(.move(edge: .bottom ) )
• iOS앱으로만 코딩했음에도불구하고 멀티플랫폼에 자동적으로 된다!!!
  • navigationView는 자동적으로 split-view로나타난다!
  • 이때문에, placeholder가필요한다. 그냥 NavigationView 블록내에서 가장아래에 Text로 추가해주면된다.
  • 아이폰에서는 자동적으로 이 placeholder를삭제해준다!!
• 🔥@State 로 직접적인 프로퍼티말고도, 객체로써도 옵저빙할수있는데, 그객체는 ObservableObject프로토콜을 채택하고, 관찰당할 프로퍼티를 @Published property wrapper를 적용해준다.
  • 이객체를 직접적으로 뷰내의프로퍼티안에서 초기화? 한다면… @StateObject를 사용해야하지만,
  • 외부에서주입받는다면 @ObservedObject키워드를붙여준다.
  • 예제에서는 객체가 앱전역적으로쓰일것으로사용했습
• 앱의 시작점은 @main을통해이루어지고, 그객체는 App 프로토콜을 채택하며 body는 some Scene타입? 이고, WindoGroup에서 시작화면을정의한다.
• 또한, 리스트에서는 .onMove, .onDelete modifier를통해 손쉽게 삭제,이동이가능하다.
  • macOS는 이것이끝인데,
  • iOS는 명시적으로 edit모드를 추가해주야한다.
  • .toolBar 블록안에, EditButton()을 추가해주면그만이다…….
    • 그리고 플랫폼마다 #if #endif 로 나타나게할수이싿.
    • 또한. 블록안에 Button을 추가할수있다.
• 그리고, 다크모드, dynamic Type, Localizable등을 테스트하기위해 canvas에서 추가로만들고, canvas의 inspect를 통해서 설정할수있다……… ( 물론 코드에도 나타난다 )
• 그리고실제디바이스에서 실행하기위해 캔버스에서 클릭하면된다.

 

 

 

 

 

 

 

 

---

뷰가 데이터를 읽을때, 암시적인 의존성을 만들어낸다.
이 의존성을통해 데이터가 변하면 뷰는 업데이트한다.
이러한의존성들을 시스템이우리 대신해준다.

만약 우리가 직접하려고한다면 정말 힘들고복잡하다. ( 아래와같이 라인들이 의존성…)



 

 

 

다시 이전내용을 완성해보자면,

State 프로퍼티를 추가한다.
우리는 뷰에서만 접근하도록할거니까, private로.


하지만 밑에 약간의공간이남는걸볼수있다.
SwiftUI는 자동적으로 safe area라는 곳에 뷰를 위치시킨다.



나는! 전체꽉차고싶어!

👍그러므로, Safe area modifier가 있다.


• .all 은 전부, .bottom 은 bottom safe area만 무시한다.
  

하지만!! 애니메이션도없이 딱딱 끊겨!! 별루야!

하지만….. swiftUI는 손쉽게 애니메이션이가능하다……- ㅁ -

• 👍zoom변화할때 withAnimation 블록안에 넣어주면끝이다.
• 그리고 아주 인터랙티브하면서 interruptible하다. 터치할떄마다 멈추고바로 되고, !!
  

그리고 하단에 자세한정보를 더 넣어주고싶다 ( 매운지, 안매운지 관련한 indicator )

그래서, 우선 Vstack으로 만든다.
그리고 modifier들을 바깥으로옮긴다.


👍약간의 이미지와 텍스트를 넣어주고싶다.
👍이럴때는 Label이 좋다!
( 오… 이젠 label에도 이미지가 들어가네….)



하지만, 그정보가 더 밑에있으면좋게써!
👍그러니, spacer() 를 추가해준다.



이미지가 가운대에있기를 원하므로,
Spacer()를 위에추가해준다.

• Sapcer()는 자동적으로 요소들사이에 약간의padding을 유지하기위한 최소사이즈를 갖는다.



🤔하지만, 이미지가 항상 컨테이너의 엣지?에 붙을수잇도록 하고싶으므로,
👍 minLength를 zero로 한다.



👍그리고 바텀배너가 좀더 패딩이있으면좋겠으니, 인스팩터를 이용할수있다.



👍폰트를키우니, system images도 덩달아 적절하게 커지는걸 볼 수 있다.


그리고 인스펙터에서 검색하여 더 modifierㅡ를 추가할수있다.





오케이! , 하지만 왜 작을까?
SwiftUI는 자동적으로 콘텐트에맞게 핏한다.


👍하지만, edge-to-edge로 맞추고싶으니,
HStack을이용하여 Label을 가운대맞추고,
HStack에도 padding, font, background, foreground가 적용이되넴….ㅇㅅㅇ





하지만, 우리는 매울때만 나타나게하고싶다.
선언형문은 이를쉽게해준다.
👍그냥! 간단하게 if 문으로 해주면된다!!! - ㅇ -
이걸테스트하기윟새ㅓ는 그냥 간단하게 프리뷰에서 데이터바꾸주면됌!


하지만, 우리는 canvas를 다양한버전별로 만들수있다……
👍Duplicate preview를 추가하면된다.


👍클릭하게되면……자동적으로 프리뷰에 Group으로묶이고, …….. 자동적으로 NavigatioView를추가해준다…..


 

👍줌하지않았을때만 하단배너가보여지고싶다.
그럼그냥 조건문을하면된다!!
또한자동적으로 애니메이션이된다!!



하지만, 애니메이션의 행동도커스텀가능하다.
👍transition ( .bottom ) 을하게되면 아래로 내려가는애니메이션이된다……..



 

 

 

이렇게 쉽게 애니메이션되는것은 data-driven 방식이기때문에가능하다.
event-driven(이전UIKIt)은 이런것이 붉가능하게어렵다!!

 

그리고우리는 처음에 멀티플랫폼앱으로 선택했다.
하지만 지금까지 아이폰에서만 작업했는데, 다른 플랫폼에서 동작하려면 얼마나작업을해야할까?

아이패드프로로 기기를 변경해보자.


👍SwiftUI는 자동적으로 navigation View를 split view로 변경해준다……





하지만, 처음에 샌드위치를 선택하지않았을때는 빈칸이다.
그러므로, 플레이스홀더를 추가하고싶다 .



👍 NavigationView에 placeHolder를 추가하는방법은,
NavigationView에 간단하게, Text를 추가해주면 이렇게보인다.
( NviagtionView 블록안에 가장 하단에 작성하면되는듯 ? )



이렇게 적절하게, 아래에보여진다……..- ㅁ -
👍그리고!! 아이폰에서는 다행히도 자동적으로 placeholder를 제거해준다.


자 그럼 macOs에서 실행해보자.



이렇게, SwiftUI를 작성하면 어떠한 플랫폼에서든 작동이가능해진다……..

 

 

 

 

 

 

👍샌드위치 리스트들을 수정하고싶다.
즉, 좀더 현실적으로, 샌드위치리스트들이 변동됐으면좋겠다( 네트워크로받아오는것처럼? )

아래와같이 샌드위치를 가지는 Sandwich Store 클래스를 만들고,
샌드위치들이 변하는 것을 시스템이 알수있도록하기위해,
ObservableObject protocol을 채택하여 , @Published 프로퍼티뤠퍼를 붙여준다.


👍@State했던것처럼 이번에는 @StateObject를 붙여준다 ( 아마, 객체, 뤠퍼여서그런드 )
마찬가지로 이키워드를통해 오브젝트를 옵저빙하며, 변화가발생할경우 뷰를ㄹ 업데이트한다.


뷰코드에 이렇게 SandwithStore를 추가할수도있지만,
👍앱전역적으로쓰일것이기때문에, 앱코드에 넣는게 더 낫겠다.
삭제하고,


 

 

여기가 앱이시작하는 지점, 코드이다.
매우 뷰와 유사한구조이다.
App 프로토콜을 채택하고이싿.

WindoGroup을 통하여, 앱에서 모든윈도우에 어떤 뷰를 사용할지정의하고있다.
@main 어트리뷰트를 통해서, 이곳이 앱의시작점을 알린다.


그러므로, 여기에 StateObject를 추가한다.


그리고이니셜라이저를넣어준다.


그리고 ContentView에서 바ㅜ꺼준다.

👍그리고, ObservedObject 를 붙여준다. 옵저빙할수있도록 . …….
@StateObject
@ObservedObject


마찬가지로 store로 리팩토링해준다.



변화하는것을 보여주기위해,
몇가지 메소드를 추가한다.
추가하고,
움직이고,
삭제하고,



미쳤당…….
👍.onMove
.onDelete modifier로….. 위의정의한 메소드를 선택하면…..
playbutton누르면 이제 셀에서삭제 및 움직일수가이싿……….



뭐징..
macOS에서는 에디팅지원을 하기위해서는 위가 전부다.
하지만 iOS에서는 swipe해서삭제하기위해서는 명시적으로 edit mode를 추가해줘야한다.

toolbar modifier를 추가하자.

NavigationView 에
👍.toolBar modifier를 추가한다.
또한 iOS에서만 나타나고싶으니, # if os ~ #endif 구문으로 나타낼수있다.



edit클릭하면 이렇게나타난다!!

• static 바텀은 에딧팅모드가안되는걸 볼수있다
• SwiftUI는 자동적으로 필요한부분들에만 나타나는걸볼수있다!!. ( 아마, forEach구문에만 나타나도록한듯. )
  

.toolbar에서
또한 추가할수있는 버튼도 만들수있다.
👍텍스트와, action을지정할수있다.

add를함으로써하단에나타난다.
이는 data 타입이 itentifilable을 채택했기때문이다.


이렇게손쉽게 적은코드로 만들수있었다.

👍하지만 우리는 사용자들에게 더 준비될수있도록하기위해 더 많은 작업들이 남아있다고생각할수도 있지만,
( Dynamic Type, Dark mode, Localization 등등 )
SwiftUI는 자동적으로 이러한기능들을 지원한다……..>!!!!

이것들으 테스트하기위해서 preview를 사용할수있다.

마찬가지로 canvas에 추가하여,



👍inspect버튼을 클릭함으로써, ………
다양한기능들을 볼수있다……>>!!






👍코드로는 이렇게나온다.


다크모드!






 

 

 

 

 

localizable 하기

다른언어로 작성된 추가해주고,


3개다 파일, localize를 클릭해준다.


그리고Arabic을 추가해준다.





 

 

 

👍.layoutDirection, rightToLeft 을통하여 이렇게 변경가능!!!



👍 다른언어로 .locale로 변경가능!!!



즉, 우리는더이상 텍스트에 localizable을 할필욕아벗게됐다.
뷰에는 아무런것을하지않았다!

 

 

 

 

이제 실제디바이스에서 작동시켜보자.!
파란색버튼을누르면 실제디바이스에서 켜진다.



그리고정말로놀라운건 우리는 앱을 빌딩하거나 실행하지않고도
앱과 테스트를 개발해냈다………… 🎉