AsyncImage 구현하기(1)
iOS15에 추가된 AsyncImage가 추가되었습니다. 이제 URL만 입력해 주면 알아서 해당 위치의 AsyncImage에 url 위치의 이미지를 다운로드 해줍니다. 해당 AnyncImage는 SwiftUI 특성 상 화면에 사라지면 소멸되고 다시 화면에 표시되려면 재 생성해야 하는데 캐시 기능이 없는 AsyncImage는 네트워크에서 이미지를 다시 다운로드 해야하는 단점이 있습니다. 또한 iOS15 이전에서는 사용할 수 없습니다. 그래서 여기에서는 AsyncImage 정의를 이용해서 동일한 타입의 CachedAsyncImage 를 구현 해 보도록 하겠습니다.
먼저 AsyncImage의 아래와 같은 세개의 초기화 함수가 있습니다.
public init(url: URL?, scale: CGFloat = 1) where Content == Image
public init<I, P>(url: URL?,
scale: CGFloat = 1,
@ViewBuilder content: @escaping (Image) -> I,
@ViewBuilder placeholder: @escaping () -> P)
where Content == _ConditionalContent<I, P>, I : View, P : View
public init(url: URL?,
scale: CGFloat = 1,
transaction: Transaction = Transaction(),
@ViewBuilder content: @escaping (AsyncImagePhase) -> Content)AsyncImage(url:) 는 성공 시내부에 Image 뷰를 보여줍니다.
AsyncImage(url:content:placeholder) 내부에 다운로드가 완료되면 Image 뷰를 그르고 아니면 placehoder를 보여 줍니다.
AsyncImage(url:content)는 내부 AsyncImagePhase에 따라 처리할 사용자가 스스로 선택할 수 있게 합니다. 아 여기서 우리는 AsyncImage는 상태 값 AsnycImagePhase 에 따라 뷰를 변경하는구나를 알수 있습니다. 그럼 AsyncImagePhase에 대해서 알아봐야 겠죠.
public enum AsyncImagePhase {
case empty
case success(Image)
case failure(Error)
public var image: Image? { get }
public var error: (Error)? { get }
}예 맞습니다. AsyncImagePhase 는 URL 요청에 따라 상태 값을 변경해 각각의 상황에 따라 해당 뷰를 처리하는 방식으로 동작하고 있습니다. 그럼 우선 CachedAsyncImage 도 이런 구조로 동작 할 수 있도록 틀을 잡아 보겠습니다.
public enum CachedAsyncImagePhase {
case empty
case success(Image)
case failure(Error)
public var image: Image? {
if case let .success(image) = self {
return image
}
return nil
}
public var error: (Error)? {
if case let .failure(error) = self {
return error
}
return nil
}
}위와같이 CachedAsnycImage의 상태 전이를 표현할 CachedAsncyImagePhase 개체를 정의하고
struct CachedAsyncImage<Content>: View where Content: View{
@State private var phase: CachedAsyncImagePhase
}이렇게 추가해 주면 나중 네트워크 에서 데이터를 가져올 때, 실패 했을 때 에 따라 phase 값을 변경하면 뷰의 화면도 갱신될 겁니다.
이제 가장 기본이 되는 마지막 초기화 함수를 작성하고 해당 초기화 함수를 이용해 나머지 두 초기화 함수도 구현해 주겠습니다.
struct CachedAsyncImage<Content>: View where Content: View{
private var url: URL?
private var scale: CGFloat
private var transaction: Transaction
private var content: (CachedAsyncImagePhase) -> Content
@State private var phase: CachedAsyncImagePhase
init(url: URL?,
scale: CGFloat = 1.0,
transaction: Transaction = Transaction(),
@ViewBuilder content: @escaping (CachedAsyncImagePhase) -> Content) {
self.url = url
self.scale = scale
self.transaction = transaction
self.content = content
self._phase = State(wrappedValue: .empty)
}
var body: some View {
content(phase)
}
}여기서 주의 깊게 봐야 할 부분은 상태 값 phase 의 초기화 부분입니다. 초기화 되지 않은 상태값은 언더바(_)pahse 에 State(wrappedValue: .empy)를 통해 직접 State 변수를 생성해줘야 합니다.
이제 init(url:URL?) 초기화 함수를 구현해 보고 이를 Preview를 통해 화면에 출력해 보죠.
init(url: URL?, scale: CGFloat = 1) where Content == Image {
self.init(url: url) { phase in
Image(systemName: "square.and.arrow.up")
}
}init(url: URL?, scale: CGFloat) 함수는 위와 같이 self.init(url:scale:transaction:content)를 통해서 초기화 합니다. 위에서와 같이 content에서 Image 뷰를 표시하겠죠. 여기서는 Preview 상태를 보기 위해 square.and.arrow.up 이미지를 표시하도록 해 두었습니다.
struct CachedAsyncImage_Previews: PreviewProvider {
static var previews: some View {
CachedAsyncImage(url: nil)
}
}그러면 아래와 같은 화면이 보여 집니다.
이제 나머지 초기화 함수를 아래와 같이 구현합니다.
init<I, P>(url: URL,
scale: CGFloat = 1,
@ViewBuilder content: @escaping (Image) -> I,
@ViewBuilder placeholder: @escaping () -> P)
where Content == _ConditionalContent<I, P>, I : View, P : View {
self.init(url: url, scale: scale) { phase in
if case .success(let image) = phase {
content(image)
} else {
placeholder()
}
}
}위의 함수를 보면 phase 의 상태가 성공하면 상태에서 image를 가져와 해당 이미지를 처리하는 content(image)를 호출하고 실패하거나 이미지가 없으면 placeholder() 를 사용하도록 구현합니다.
벌써 반이나 왔습니다. 이제 URL을 이용해서 해당 주소에 image를 받아오는 부분만 처리하면 되겠죠.
이제 뷰에 시작 시 URL 주소로 이미지 요청을 위해 iOS15.0 이상에서는 .task 한정자를 이용하겠습니다. 이전 버전은 .onAppear에 해당 부분을 구현하는 걸로 마무리 합니다.
var body: some View {
if #available(iOS 15.0, *) {
content(phase)
.task {
guard let url = self.url else { return }
let request = URLRequest(url: url)
do {
//async await를 이용하여 구현
let (data, response) = try await
URLSession.shared.data(for: request)
let httpResponse = response as! HTTPURLResponse
if httpResponse.statusCode < 200 || httpResponse.statusCode > 300 {
self.phase = .failure(CachedAsyncImageError.httpResponseError(httpResponse.statusCode))
print("http response error: \(httpResponse.statusCode)")
}
guard let uiImage = UIImage(data: data) else {
self.phase = .failure(CachedAsyncImageError.imageCreatedFail)
print("image create fail")
return
}
withAnimation(transaction.animation) {
self.phase = .success(Image(uiImage: uiImage))
}
} catch {
self.phase = .failure(error)
print("url request failed: \(error)")
}
}
} else {아래 부분은 15.0 이후 버전에 동작하는 코드입니다.
} else {
content(phase)
.onAppear {
guard let url = self.url else { return }
let reqeust = URLRequest(url: url)
URLSession.shared.dataTask(with: reqeust){(data, response, error) in
DispatchQueue.main.async {
if let error = error { self.phase = .failure(error) }
let httpResponse = response as! HTTPURLResponse
if httpResponse.statusCode < 200 || httpResponse.statusCode > 300 {
self.phase = .failure(CachedAsyncImageError.httpResponseError(httpResponse.statusCode))
print("http response error: \(httpResponse.statusCode)")
return
}
guard let uiImage = UIImage(data: data!) else {
self.phase = .failure(CachedAsyncImageError.imageCreatedFail)
print("image create fail")
return
}
withAnimation(transaction.animation) {
self.phase = .success(Image(uiImage: uiImage))
}
}
}.resume()
}이제 동작을 확인했으니 URLRequest 부분과 상태관리를 CachedAsyncImageViewModel로 변경해 보겠습니다.
class CachedAsyncImageViewModel: ObservableObject {
@Published var phase: CachedAsyncImagePhase = .empty
이제 URL 요청에 따른 상태 관리는 CachedAsyncImageViewModel을 통해서 이루어지고 CachedAsyncImageView는 상태값이 변경 될 때마다 자동으로 뷰를 재 생성합니다.
struct CachedAsyncImage<Content>: View where Content: View{
@ObservedObject private var viewModel = CachedAsyncImageViewModel()이제 iOS15 이상 버전의 fetcth 함수와 이전 버전의 함수를 CachedAsyncImageViewModel로 이동시키는 데, 이전 버전의 함수는 Combine을 사용해 변경해 보겠습니다.
class CachedAsyncImageViewModel: ObservableObject {
@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
func fetch(url: URL?) async {
guard let url = url else {
phase = .failure(CachedAsyncImageError.urlError)
return
}
let request = URLRequest(url: url)
do {
let (data, response) = try await URLSession.shared.data(for: request)
let httpResponse = response as! HTTPURLResponse
if httpResponse.statusCode < 200 || httpResponse.statusCode > 300 {
phase = .failure(CachedAsyncImageError.httpResponseError(httpResponse.statusCode))
return
}
guard let uiImage = UIImage(data: data) else {
phase = .failure(CachedAsyncImageError.imageCreatedFail)
return
}
phase = .success(Image(uiImage: uiImage))
} catch {
phase = .failure(error)
}
}func fetchImage(url: URL?) {
guard let url = url else {
phase = .failure(CachedAsyncImageError.urlError)
return
}
cancelable = URLSession.shared.dataTaskPublisher(for: url)
.tryMap { data, response in
//HTTP 에러 처리 completed 가 .failure를 전달하도록 변경
let httpResponse = response as! HTTPURLResponse
if httpResponse.statusCode < 200 || httpResponse.statusCode > 300 {
throw CachedAsyncImageError.httpResponseError(httpResponse.statusCode)
}
//response 에 관심이 없으면 제거
return (data, response)
}
.receive(on: DispatchQueue.main)
.sink { completon in
if case let .failure(error) = completon {
self.phase = .failure(error)
}
} receiveValue: { data, response in
guard let uiImage = UIImage(data: data) else {
self.phase = .failure(CachedAsyncImageError.imageCreatedFail)
return
}
self.phase = .success(Image(uiImage: uiImage))
}
}Combine으로 변경한 내용 중에 중요한 점은 상태 값 즉 퍼플리쉬 될 phase의 값의 변경은 메인 스레드에서해야 한다는 점입니다. 따라서 여기서 .receive(on: DispatchQueue.main)을 통해서 해당 전파가 메인 스레드에서 동작하도록 변경합니다.
이제 CachedAsyncImage에 해당 코드를 추가 합니다.
var body: some View {
if #available(iOS 15.0, *) {
content(viewModel.phase)
.task {
await viewModel.fetch(url: url)
}
} else {
content(viewModel.phase)
.onAppear {
viewModel.fetchImage(url: url)
}
}
}
캐시 관련 내용은 다음에 작성하도록 하겠습니다.
소스는 github 에서 다운받으 실 수 있습니다.