[iOS] SwiftUI

2019 WWDC에서 SwiftUI를 소개하며 The shortest path to a great app, The shortest path to a great UI라고 설명했다.

SwiftUI의 View는 UIKit에서의 View와는 조금 다르다. 

UIKit에서의 view는 UI 컴포넌트 중 하나일 뿐이지만, SwiftUI의 View는 상태의 함수(function of state)이다.

Views are a function of state, not of a sequence of events.

 

위의 말이 무엇인지 살펴보면

표현하고자 하는 뷰, UI의 속성은 상태로 표현되고 이러한 상태를 함수 형태의 인자로 전달하면 세세한 건 SwiftUI 프레임워크가 알아서 해석해서 View로 표현한다는 것이다.

 

SwiftUI는 데이터 흐름의 일원화와 그러한 데이터를 뿌려주는 뷰의 역할은 무엇인지에 대한 고민을 토대로 디자인되었다고 한다.

그래서 데이터 흐름을 기준으로 여러 Property Wrapper라는 개념(따로 포스팅 예정)이 도입되었다.

 

SwiftUI는 사용자 인터페이스 디자인에 대한 선언적 접근 방식을 제공한다.

기존의 명령적 접근 방식을 사용하면 뷰를 인스턴스 화하고 레이아웃 구성을 하고 조건이 변경됨에 따라 지속적으로 업데이트되어야 되는 부담이 있지만

선언적 접근 방식에서는 인터페이스가 원하는 레이아웃을 미러링 하는 계층 구조에서 뷰를 선언하게 되고 사용자 인터페이스에 대한 간단한 설명을 만들게 된다.

그다음 SwiftUI는 사용자의 입력이나 상태 변경과 같은 이벤트에 대한 응답으로 이러한 뷰를 그리고 업데이트하는 것을 관리하게 된다.

SwiftUI는 사용자 인터페이스에서 뷰를 정의하고 구성하기 위한 도구를 제공한다.

 

명령형과 선언형의 차이 예시

명령형

선언형

View 프로토콜의 필수 사항은 body를 정의해야 하는 것이다. SwiftUI는 View를 업데이트할 때마다 body 속성을 읽는다.

some View를 통해 body의 속성이 뷰를 준수한다는 것을 표시한다. -> 프레임 워크가 자동으로 추론한다.

SwiftUI를 이용하면 아래의 VStack 외에도  다중 클로저 작성이 가능하다.  단순하게 입력하고 싶은 뷰를 나열하면 된다.

 

body에서 뷰를 구성할 때 View Modifier 적용할 수 있다.

View Modifier는 특정 뷰에서 호출되는 메서드이다. 이 메서드는 뷰 계층 구조에서 기존의 뷰를 대체하여 변경된 새 뷰를 반환해준다.

SwiftUI는 이러한 목적을 위해 많은 메서드 세트로 뷰 프로토콜을 확장한다. 뷰 프로토콜을 준수하는 모든 요소들은 뷰의 동작을 변경하는 메서드에 액세스 가능하다.

아래 Font로 확인해보자. Text() 아래에. font()라는 Modifier를 이용하여 글꼴을 바꿀 수 있는 것을 확인할 수 있다.

 

contentView(root View)에 위에서 생성한 뷰를 넣으면 아래와 같이 잘 확인된다.

 

마지막으로 기존의 UIKit 기반으로 만들어진 애플리케이션을 SwiftUI로 개발하고 싶을 때 어떻게 해야 할까?

SwiftUI는 UIKit을 포함하고 있다고 했다. 즉, SwiftUI는 모든 애플 플랫폼의 기존 ui 프레임 워크와 원활하게 작동한다.

UIKit의 뷰와 뷰 컨트롤러를 SwiftUI의 뷰 내에 배치 또한 가능하고 반대 또한 가능하다.

 

아래 넷플릭스 스타일 영화 추천 프로젝트도 SwiftUI 의 뷰 내에 UIKit의 뷰와 뷰 컨트롤러를 배치하고 다시 SwiftUI로 연결한 예시이다.

https://yesiamnahee.tistory.com/131?category=886482 

[iOS] 넷플릭스 스타일 영화 추천 프로젝트