[SwiftUI] Custom AsyncImage 만들기
서론
SwiftUI에서 원격에 저장되어 있는 이미지를 보여줘야 하는 경우가 있습니다. 그럴 경우 iOS 15 이상에서 추가된 AsyncImage를 사용하면 되지만 최소 요구조건이 iOS 15 이상이며 URLSession의 shared 인스턴스밖에 사용할 수 없습니다. 추가적인 Header를 통해 접근할 수 없으며 유저가 인증된 상태에서만 볼 수 있는 이미지를 표시해야하는 경우도 생길 수 있습니다. 그럴 경우엔 Custom으로 구현해야 하는데 이번 글에서는 AsyncImage의 기능과 인터페이스를 유사하게 구현해보고 추가적으로 이미지 로딩에 실패했을때 다른 View를 보여줄 수 있도록 해보겠습니다.
본론
기존 AsyncImage의 기본적인 생성 인터페이스는 아래와 같습니다.
init(url: URL?, scale: CGFloat)
init<I, P>(url: URL?, scale: CGFloat, content: (Image) -> I, placeholder: () -> P)그리고 아래의 상태 값을 갖고 있습니다.
enum AsyncImagePhase {
/// No image is loaded.
case empty
/// An image succesfully loaded.
case success(Image)
/// An image failed to load with an error.
case failure(Error)
/// The loaded image, if any.
var image: Image? { getter }
/// The error that occurred when attempting to load an image, if any.
var error: Error? { getter }
}AsyncImagePhase의 경우 그대로 가져다 쓰면 좋겠지만, iOS 15+ 부터 사용 가능한 제약 조건이 있으니 직접 구현해주도록 합니다. 이름이 중복될 수 있으니 저는 AsyncImagePhase -> NetworkImagePhase로 네이밍을 치환하도록 하겠습니다.
enum NetworkImagePhase {
/// No image is loaded.
case empty
/// An image succesfully loaded.
case success(Image)
/// An image failed to load with an error.
case failure(Error)
}위 처럼 enum을 구현해줬다면 NetworkImage 컴포넌트에서 사용될 이미지를 가져올 객체를 구현해줍니다.
@MainActor
final class NetworkImageLoader: ObservableObject {
private let url: URL
private let session: Session
@Published var phase = NetworkImagePhase.empty
init(url: URL, session: Session = .shared) {
self.url = URL
self.session = session
}
func load() { ⋯ }
func cancel() { ⋯ }
}간단하게 load, cancel 메소드를 구현해줄 예정인데, 여기서 이미지 주소의 인자를 URL 타입으로만 받고 있습니다. URL타입으로만 제공되어지면 괜찮겠지만 여러가지 옵션을 더 주도록 해볼까요? NetworkImageSource 라는 열거형을 추가해봅시다.
enum NetworkImageSource {
/// An image source in String type
case string(path: String)
/// An image source in URL type
case url(url: URL?)
}처음에 구현했던 ImageLoader의 생성자와 변수를 아래와 같이 변경해줍니다.
@MainActor
final class NetworkImageLoader: ObservableObject {
private let source: NetworkImageSource
⋯
init(source: NetworkImageSource, session: Session = .shared) {
self.source = source
⋯
}
}이제 여러 타입으로도 제공할 수 있는 생성자로 구현되었습니다. 이제 실제 load 메소드와 cancel 메소드를 URLSession.shared가 아닌 커스텀한 Session 클래스의 통신 메소드를 통해 접근하면 됩니다. 아래와 같이 구현합니다.
@MainActor
final class NetworkImageLoader: ObservableObject {
private var task: Task<Void, Error>? = nil
deinit {
Task {
await cancel()
}
}
func load() {
task = Task {
do {
let sessionRequest: SessionRequest
switch source {
case .string(let path):
guard let url = URL(string: path) else { throw SessionError.missingURL }
sessionRequest = try SessionRequest(url: url)
case .url(let url):
guard let url else { throw SessionError.missingURL }
sessionRequest = try SessionRequest(url: url)
}
let image = try await session.imageTask(for: sessionRequest)
phase = .success(image)
} catch {
phase = .failure(error)
}
}
}
func cancel() {
task?.cancel()
}
}아주 간단한 형태의 ImageLoader 클래스가 만들어졌습니다! source의 타입에 따라 URL 객체를 생성하고, Session 클래스를 통해 Image 객체를 얻은 뒤 반환하는 코드입니다. 에러가 있다면 phase 값에 .failure 값이 할당되고 인자로 Error를 전달하게 됩니다. 이제 View를 구현해볼까요?
struct NetworkImage<Content>: View where Content: View {
@StateObject private var loader: NetworkImageLoader
@ViewBuilder private var content: (NetworkImagePhase) -> Content
init(source: NetworkImageSource, @ViewBuilder content: @escaping (NetworkImagePhase) -> Content) {
_loader = .init(wrappedValue: NetworkImageLoader(source: source))
self.content = content
}
var body: some View {
content(loader.phase)
.onAppear {
loader.load()
}
}
}첫번째 인자로는 원격에 저장된 이미지의 주소를 받을 수 있는 source를 정의해주었고, 두번째 인자로는 NetworkImagePhase에 따른 View 출력에 대한 기본적인 생성자를 정의해주었습니다. 외부로부터 데이터를 받고 상태를 초기화해야하므로 생성자를 해당 문서처럼 정의합니다. 이렇게 구현하면 나중에 View내의 상태값이 변경되어도 loader는 단 1회만 생성됩니다. 위처럼 구현했으면 NetworkImage를 아래와 같이 사용할 수 있습니다.
private var thumbnailImage: some View {
NetworkImage(source: .string(path: ...)) { phase in
switch phase {
case .empty:
...
case .success(let image):
...
case .failure(let error):
...
}
}
}phase를 계속 분기해줘야해서 개발자 입장에서 사용하기 굉장히 불편해보입니다. 기존에 사용하던 AsyncImage의 몇가지 추가 생성자도 구현해봅시다.
extension NetworkImage {
init<I, P>(
source: NetworkImageSource,
@ViewBuilder content: @escaping (Image) -> I,
@ViewBuilder placeholder: @escaping () -> P
) where Content == _ConditionalContent<I, P>,
I : View,
P : View {
self.init(source: source) { phase in
switch phase {
case .success(let image):
content(image)
case .empty, .failure:
placeholder()
}
}
}
}
private var thumbnailImage: some View {
NetworkImage(
source: .url(url: thumbnailURL),
content: { image in
image
}, placeholder: {
ProgressView()
}
)
}이제 AsyncImage처럼 구현할 수 있게 되었습니다. 추가적으로 이미지 로딩에 실패했을 시나리오에 대한 생성자도 추가해봅시다.
extension NetworkImage {
init<I, P, F>(
source: NetworkImageSource,
@ViewBuilder content: @escaping (Image) -> I,
@ViewBuilder placeholder: @escaping () -> P,
@ViewBuilder failure: @escaping (Error) -> F
) where Content == _ConditionalContent<_ConditionalContent<I, P>, F>,
I : View,
P : View,
F : View {
self.init(source: source) { phase in
switch phase {
case .success(let image):
content(image)
case .empty:
placeholder()
case .failure(let error):
failure(error)
}
}
}
}
private var thumbnailImage: some View {
NetworkImage(
source: .url(url: thumbnailURL),
content: { image in
image
}, placeholder: {
ProgressView()
}, failure: { error in
Text("An error has occurred: \(error.localizedDescription)")
}
)
}이제 이미지 로딩전에는 placeholder에 정의된 View가 보여지게 되고, 이미지 로드 성공시에는 content에 정의된 View가 보여지며 로딩 실패시에는 failure에 정의된 Text가 보여지게 됩니다.
결론
⋯
참고
https://bignerdranch.com/blog/asynchronously-load-images-with-customized-asyncimage-view-in-swiftui/
최신 댓글