SwiftUI 프로토콜, View 역할 및 속성 적용방법

 

 

---

View
뷰

뷰(View)는 SwiftUI로 앱 개발을 할 때 앱의 유저 인터페이스의 일부를 표현하며, 이러한 View들을 설정하는데 사용하는 변형자(modifiers) 메서드를 제공합니다. 

 

 

---

Declaration
View 선언방법

 

 

SwiftUI의 구성물 중 하나인 View는 프로토콜 구조로 되어있습니다.

SwiftUI 프레임워크에 속해있으며, iOS 13.0 / macOS 10.15 / watchOS 6.0 이상에서 사용 가능합니다.

 

 

---

Overview
개요

View 프로토콜을 채택, 준수한 타입을 통해서 커스텀 뷰를 생성할 수 있습니다.

View 프로토콜을 채택 후, body 라는 계산 프로퍼티를 구현해야합니다. 구현된 body 계산 프로퍼티는 커스텀 뷰의 컨텐츠를 제공하는데에 사용합니다.

 

 

View 프로토콜을 채택한 MyView는 body 계산프로퍼티를 구현해야합니다.

 

위와 같이 View 프로토콜을 채택한 MyView는 body 계산프로퍼티를 구현해야합니다.

SwiftUI에 의해 제공되는 한개 혹은 그 이상의 원시 뷰들을 조합해서 뷰의 body를 구성할 수 있습니다.

그 예시를 위의 코드를 통해서 볼 수 있습니다. 위의 코드는 View 프로토콜을 채택한 MyView 내에 body를 구성하고 body 내에서 Text 인스턴스를 사용하고 있습니다. 이 외에 추가적으로 뷰의 계층에 다른 커스텀 뷰들을 넣어 사용할 수도 있습니다.

 

 

---

View & Modifier
뷰 & 변형자

View 프로토콜은 다양한 변형자(modifiers) 집합체를 제공합니다.

이들은 프로토콜 메서드로 정의되어 있으며, 기본적인 셋팅값(default value)도 존재합니다.

이들을 통해 뷰를 설정하거나 레이아웃을 배치할 수 있습니다. 또한 변형자(mofidiers) 메서드들은 전형적으로 특징이 명시 된 다른 뷰들 내에서 호출하는 View 인스턴스를 래핑, 감싸면서 작동하게 됩니다.

 

그 예시로, Text View의 투명도를 설정하기 위해 opacity 라는 modifier 메서드를 사용할 수 있습니다. 그 사용 예시는 아래와 같습니다.

 

 

 

위와 같이 사용되는 opacity 등의 modifier 메서드들의 효과는 기본적으로 적용되는 해당 뷰에 자식 뷰들에게도 전파됩니다. 이때 자식 뷰들은 해당 modifier에 대해서 오버라이드 할 필요가 없습니다. 

그 예시로, 수직(Vertical) 방향의 StackView 구성에 사용되는 VStack 인스턴스는 따로 표시할 텍스트를 갖고 있지 않습니다. 

따라서, 해당 VStack에 font(_:) modifier 메서드를 적용해도 별도의 효과는 작용하지 않습니다. 텍스트를 별도로 갖고 있지 않기 때문이죠.

하지만 이때, VStack에 font(_:) modifier 메서드가 효과를 발휘하지 않더라도, 해당 VStack의 서브뷰에서도 이어서 적용을 하게 됩니다. 해당 서브뷰 들 중에서는 표시할 text가 존재할 수도 있겠죠.

이와 다른 적용 방법으로, 우리는 Stack이 아닌 그 내부 서브뷰에 명시적으로 modifier 메서드를 사용할 수도 있습니다. 정말 적용되어야 하는 서브뷰에만 말이죠. 그 사용 방법은 아래와 같습니다. 

 

 

 

위의 코드를 보면, VStack 내부의 text가 존재하는 서브뷰에만 명시적으로 font(_:) modifier 메서드를 적용하는 것을 알 수 있습니다. 

위의 예시처럼 modifier 메서드 사용이 가능하지만, 체인 형식으로 여러개의 modifier 메서드들을 이어서 사용할 수도 있습니다. 

그 예시로, Text 뷰를 보이지 않는 박스로 감싸는 작업을 frame(width:height:alignment:) 메서드로, 해당 뷰의 외곽선을 그리는 작업은 border(_:width:) 메서드로 적용할 수 있는데 이 두개의 modifier 메서드를 체인 방식으로 적용시킬 수 있습니다. 

그 예시는 아래와 같습니다. 

 

 

frame, border modifier method를 체이닝 방식으로 사용할 수 있습니다.

 

위와 같이 Text 뷰에 frame과 border 속성을 적용할 수 있게 되었습니다. 그 결과, 해당 뷰의 모습은 아래와 같이 표현될 수 있습니다. 

 

 

 

만약 frame대신, border 값을 먼저 적용하고 싶다면, 체이닝의 순서를 바꾸면 됩니다. 이러한 적용할 modifier method 순서 차이는 다른 표출결과를 만들 수도 있습니다.

가령 프레임 크기를 잡고 -> 해당 프레임을 기준으로 외곽선을 표현하는 것 vs 기존 프레임 기준 외곽선 표현 후 프레임 크기를 잡는 것은 분명 차이가 있겠죠. 

만약 Text 뷰의 frame -> border 순서 적용 대신, 반대 순서인 border -> frame 순서로 속성을 적용 하면 위의 결과와 다르게 표출되는 것을 알 수 있습니다. 그 결과는 아래와 같습니다.