[SwiftUI] ViewModifier 를 이용한 View 익스텐션 활용

▼ 스위프트 UI는 선언형 UI를 사용합니다. 예를 들면 다음과 같이 Color.red 에 .ignoresSafeArea() 라는 ViewModifier를 추가해서 화면에 SafeArea를 포함해서 전체화면을 빨간색으로 채울 수 있습니다. 마찬가지로 .frame을 이용해서 화면 사이즈를 변경할 수도 있습니다.

	struct ViewModifierTest: View {
	var body: some View {
	Color.red
	.ignoresSafeArea()
	}
	}

view raw blog1.swift hosted with ❤ by GitHub

ignoresSafeArea

---

 

 

 

▼ 이번에는 ZStack을 사용해서 Color와 Text를 중첩해서 표현하겠습니다. ZStack의 alignment를 .bottomTrailing 옵션으로 Text를 우측 하단에 포함시킵니다. Text에도 역시 font, foregroundColor 와 같은 다양한 modifer가 추가되어있습니다. 때문에 코드가 복잡해지고 재사용하기 힘든 코드가 됩니다.

	struct ViewModifierTest: View {
	var body: some View {
	ZStack(alignment: .bottomTrailing) {
	Color.red
	.frame(width: 300, height: 300)
	Text("스위프트 UI")
	.font(.caption)
	.foregroundColor(.white)
	.padding(5)
	.background(.black)
	}
	}
	}

view raw blog2.swift hosted with ❤ by GitHub

ZStack

---

 

 

 

▼ ViewModifier를 확장한 Watermark Struct를 만들었습니다. text 라는 변수를 선언하고 body 부분에 ZStack을 구성합니다. body(content: Content) 를 보면 파라미터로 Content 타입을 받는 것을 볼 수 있습니다. 이 부분이 modifer의 대상 컨텐츠가 됩니다. 

	struct Watermark: ViewModifier {
	var text: String
	func body(content: Content) -> some View {
	ZStack(alignment: .bottomTrailing) {
	content
	Text(text)
	.font(.caption)
	.foregroundColor(.white)
	.padding(5)
	.background(.black)
	}
	}
	}

view raw blog3.swift hosted with ❤ by GitHub

---

 

 

 

▼ 이제 처음 코드로 돌아가 Color.red에 .modifer(Watermark(text: "스위프트 UI") 를 추가해주면 간결하게 동일한 화면을 렌더링 할 수 있습니다.

	struct ViewModifierTest: View {
	var body: some View {
	Color.red
	.frame(width: 300, height: 300)
	.modifier(Watermark(text: "스위프트 UI"))
	}
	}

view raw blog4.swift hosted with ❤ by GitHub

---

 

 

 

▼ 이제 extension을 이용해서 간단하게 사용해보도록 하겠습니다. View에 대한 익스텐션을 만들고 wartermarked 라는 함수를 하나 추가합니다.

	extension View {
	func watermarked(with text: String) -> some View {
	modifier(Watermark(text: text))
	}
	}

view raw blog5.swift hosted with ❤ by GitHub

---

 

 

 

▼ 이제는 .watermarked 라고만 치면 어떤 뷰에서든지 Watermark 를 쉽게 사용할 수 있습니다. 이렇게 사용하면 과정은 조금 복잡하지만 동일한 형태의 화면을 좀 더 재 사용하기 쉽게 만들 수 있고 코드를 간결하게 만들 수 있습니다.

	struct ViewModifierTest: View {
	var body: some View {
	Color.red
	.frame(width: 300, height: 300)
	.watermarked(with: "스위프트 UI")
	}
	}

view raw blog6.swift hosted with ❤ by GitHub

---