[UI] Storyborad(UIKit) vs SwiftUI

안녕하세용
SwiftUI에대해 자세히 공부해보게됐는데, 정리해놓으면 좋을 것 같아서 데려왔습니당 ㅎㅎ

UIKit에대해 모르시는 분들은 UIKit 글을 먼저 보고 오셔야 이해하기 쉽습니다!
이 글은 아래 사이트를 참고해서 작성되었습니다 :D

Apple Developer - SwiftUI
Fastcampus - 30개 프로젝트로 배우는 iOS 앱 개발(with Swift)

---

SwiftUI ??

 

 

The shortest path to a great app

The shortest path to a great UI

 

Apple에서 처음에

SwiftUI를 위와 같은 문장으로 소개하였다고 해요ㅎㅎ

 

멋진 앱으로 가는 최단 경로

멋진 UI로 가는 최단 경로

 

그만큼 좋은 Framework라는 뜻 같습니당ㅎㅎ

 

 

 

그럼 이제 Apple Developer 사이트에

SwiftUI가 어떻게 설명되어있나 함께 볼까요?

 

 

해석을 해보면,
SwiftUI는 App에 사용자 Interface를 선언하기위한

Views, Controls, layout을 구조체(Struct)형태로 제공합니다.

Framwork는 Tap, Gestures 및 기타 유형의 입력을

앱에 전달하기위한 Event Handler와 app's Models에서

사용자가 보고 상호 작용할 보기 및 컨트롤에 이르기까지

데이터 흐름을 관리하는 도구를 제공합니다.

 

라고 해요..

음.. UI에 관련된 거라는 것은 이해가 됐는데,

설명이 UIKit과 SwiftUI가 상당히 유사하네요....

 

 

맞아요!

실제로 UIKit과 상당히 유사합니당

 

아래 이미지처럼

SwiftUI는 UIKit에서 기대할 수 있는 모든 기본 구성 요소들을 포함하고 있기때문에

완전히 새로운 Framework이지만 동시에 친숙하다고해요ㅎㅎ

 

 

그럼 정확히 UIKit과 SwiftUI가 다른점이 뭘까요?????

 

---

UIKit과 SwiftUI의 차이점

 

보통 SwiftUI와 UIKit의 차이점을

 

SwiftUI : 선언형

UIKit : 명령형

 

이렇게! 설명을 많이하는데요!

 

글로만 설명하면 이해가 어려울 수 있어서

그림으로 정리해보았습니다!! :D

 

 

SwiftUI의 선언형은 간단하게 선언만 해놓으면 알아서 해주고,

UIKit의 명령어는 세세하게 다 명령을 해줘야하는군요!

 

확실히 SwiftUI가 좋아보여요 ㅋㅋㅋㅋ

 

위 이미지는 이해하기 쉽도록 예시를 들어놓은거라

제대로 명령적 접근 방식과 선언적 접근방식에대해 알아봅시다!

 

 

UIKit의 명령적 접근 방식을 사용하면,

controller코드가 view를 인스턴스와하고 layout을 구성할뿐만아니라 조건이 변경됨에따라 지속적으로 업데이트해야하는 불편함이있습니다.

반면 SwiftUI의 선언적 접근 방식을 사용하면,

Interface가 원하는 layout을 미러링하는 계층구조에서 view를 선언합니다.
사용자 Interface에대한 간단한 설명을 만들게되고,
swiftUI는 사용자의 입력, 상태 변경과 같은 이벤트에대한 응답으로 이러한 view의 update를 관리하게 됩니다.
또한 SwiftUI는 사용자 Interface에서 view를 정의하고 구성하기위한 도구도 제공합니다.

 

좀.. 구구절절로 설명이되어있네요...

간단히 설명해보면!!

 

UIKit의 명령적 접근 방식은 View가 변경되면 View의 전체가 변경되지만,

SwiftUI의 선언적 접근방식은 해당 이벤트에 관련된 부분만 수정됩니다!!

 

왜 SwiftUI를 많이 사용하는지 아시겠져?ㅎㅎ

 

 

아무래도 UI 관련된 것이라 View가 언급이 많이되는데,

이번에는 SwiftUI의 View를 알아봅시다!!

---

 

SwiftUI에서 View

 

 

Views are a function state, not of a sequence of event

 

SwiftUI에서의 View는

데이터 흐름의 일원화와 그러한 데이터를 뿌려주는 View의 역할은 무엇인가?

에대한 고민을 토대로 디자인되었다고해요!

 

 

그래서 데이터 흐름 기준으로 여러 Property wrapper 개념을 도입하였는데,

 

 

Property Wrapper

 

해석해보면,

 

View의

내부 : @State

외부 : @ObservableObject

 

Type

값: @State

참조: @ObservableObject

 

Managed 방법

Framework가 자체적으로 관리: @State

개발자가 직접 선언체 관리: @ObservableObject

 

같은 특징을 가지고 있습니다!

 

글로만 이렇게 나열하니까 이해가 잘 가지 않죠?

SwiftUI의 Data Flow를 보면서 Property wrapper를

어떻게 사용하는지 이해해봅시다!

 

SwiftUI의 Data Flow

 

외부 Dependency(의존)가 없는 단일 View라고 했을때,

@State Property wrapper 는 아래 순서로 데이터의 흐름이 진행됩니다.

 

 

 

발생하는 어떤 이벤트는 User Interaction을 통한 Action을 전달

 

->  Action을 통해 State(상태)를 mutation(변화)시킴

 

-> 그에대한 update가 View에 전달

 

-> 최종적으로 update에따라서 View는 새롭게 Render함

 

-> User에게 보여짐

 

이런 과정을 거쳐서 View에 보이는 거군요?!

 

 

따라오시느라 고생많으셨어요 ㅎㅎ

이번 시간에는 SwiftUI에대해 개념적으로 이해하는 시간이었습니다!

다음에는 SwiftUI Container View에대해 알아보면서

직접 활용하는 시간을 가지겠습니다!