extension 활용하기

• Sec.21

AsyncImage(url: URL(string: imageURL)) { image in 
	image
} placeholder: {
	Image(systemName: "photo.circle.fill)
}

라는 구조를 가진 코드가 있다. imageURL은 상수로 실제 이미지의 링크를 가져온 것이다.

이때

AsyncImage(url: URL(string: imageURL)) { image in 
	image
	.resizable()
	.scaledToFit()
} placeholder: {
	Image(systemName: "photo.circle.fill)
		.resizable()
		.scaledToFit()
		.frame(maxWidth: 128)
		.foregroundColor(.purple)
		.opacity(0.5)
}

이와 같이 각 항목에 대해 스타일 속성을 넣어줄려면 다음과 같이 작성했다.

이때! extension을 활용하면 코드를 재사용성을 높이고, 간략화 할 수 있다.

지금 둘다 Image를 사용했기 때문에

extension Image {
	func imageModifier() -> some View {
		self
				.resizable()
				.scaledToFit()
	}

	func iconModifier() -> some View { 
		self
				.imageModifier()
				.frame(maxWidth: 128)
				.foregroundColor(.purple)
				.opacity(0.5)
	}
}

다음과 같이 정의할 수 있다.

그럼 Image에 대한 extension을 정의 했으니 다음과 같이 사용할 수 있다.

AsyncImage(url: URL(string: imageURL)) { image in 
	image
		.imageModifier()
} placeholder: {
	Image(systemName: "photo.circle.fill)
		.iconModifier()
}

전체 코드

extension Image {
	func imageModifier() -> some View {
		self
				.resizable()
				.scaledToFit()
	}

	func iconModifier() -> some View { 
		self
				.imageModifier()
				.frame(maxWidth: 128)
				.foregroundColor(.purple)
				.opacity(0.5)
	}
}

struct ContentView: view {
	private let imageURL: String = "원하는 이미지 링크"
	
	var body: some View {
		AsyncImage(url: URL(string: imageURL)) { image in 
			image
				.imageModifier()
		} placeholder: {
				Image(systemName: "photo.circle.fill)
				.iconModifier()
		}
	}
}