[SwiftUI] ViewModifier 를 이용한 View 익스텐션 활용
- 언어/스위프트 UI
- 2022. 11. 28.
▼ 스위프트 UI는 선언형 UI를 사용합니다. 예를 들면 다음과 같이 Color.red 에 .ignoresSafeArea() 라는 ViewModifier를 추가해서 화면에 SafeArea를 포함해서 전체화면을 빨간색으로 채울 수 있습니다. 마찬가지로 .frame을 이용해서 화면 사이즈를 변경할 수도 있습니다.
▼ 이번에는 ZStack을 사용해서 Color와 Text를 중첩해서 표현하겠습니다. ZStack의 alignment를 .bottomTrailing 옵션으로 Text를 우측 하단에 포함시킵니다. Text에도 역시 font, foregroundColor 와 같은 다양한 modifer가 추가되어있습니다. 때문에 코드가 복잡해지고 재사용하기 힘든 코드가 됩니다.
▼ ViewModifier를 확장한 Watermark Struct를 만들었습니다. text 라는 변수를 선언하고 body 부분에 ZStack을 구성합니다. body(content: Content) 를 보면 파라미터로 Content 타입을 받는 것을 볼 수 있습니다. 이 부분이 modifer의 대상 컨텐츠가 됩니다.
▼ 이제 처음 코드로 돌아가 Color.red에 .modifer(Watermark(text: "스위프트 UI") 를 추가해주면 간결하게 동일한 화면을 렌더링 할 수 있습니다.
▼ 이제 extension을 이용해서 간단하게 사용해보도록 하겠습니다. View에 대한 익스텐션을 만들고 wartermarked 라는 함수를 하나 추가합니다.
▼ 이제는 .watermarked 라고만 치면 어떤 뷰에서든지 Watermark 를 쉽게 사용할 수 있습니다. 이렇게 사용하면 과정은 조금 복잡하지만 동일한 형태의 화면을 좀 더 재 사용하기 쉽게 만들 수 있고 코드를 간결하게 만들 수 있습니다.
'언어 > 스위프트 UI' 카테고리의 다른 글
| [SwiftUI] UIKit 화면 프리뷰(Preview)에서 띄우기 (0) | 2023.01.17 |
|---|---|
| [SwiftUI] UIViewRepresentable 프로토콜 사용법 (0) | 2022.12.16 |
| [SwiftUI] 텍스트 필드(TextField) 정리 (0) | 2022.11.24 |
| [SwiftUI] Lottie 로티 애니메이션 뷰 만들기 (0) | 2022.11.21 |
| [SwiftUI] VStack, HStack, ZStack 스택 레이아웃 (0) | 2022.09.24 |