[54] AsyncImage / @unknown

⭐️AsyncImage / @unknown⭐️

AsyncImage는 SwiftUI에서 이미지를 비동기적으로 로드하는 데 사용되는 뷰이다.
이미지를 로드하는 동안 UI를 멈추지 않고 사용자 경험을 향상시킬 수 있다.(검은 화면만 보이면 유저는 어떤 상황인지 알지 못함)

*URL(Uniform Resource Locator 또는 통칭 web address, 문화어: 파일식별자, 유일자원지시기)
 네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약

 

*캐시(cache) - 데이터나 값을 미리 저장해 놓는 임시 저장소. 데이터가 캐시에 저장되어 있다면
다음에 데이터에 접근할 때 더 빠르게 데이터를 가져올 수 있다. (캐시 삭제)

캐시는 데이터를 빠르게 가져올 수 있어서 앱 성능 향상에 도움이 된다. 네트워크 사용량도 줄일 수 있다.

하지만 일정 시간이 지나면 데이터가 유효하지 않을 수도 있음을 유의하자.

 

AsyncImage는 URL을 받아서 다운로드 및 캐싱을 처리한다.
즉 동일한 URL로 이미지를 다시 요청할 경우 이미지를 다시 다운로드 하는 대신 캐시에서 이미지를 로드한다.

 

활용 예시

//  Created by Toughie on 2023/05/11.
//

import SwiftUI

struct AsyncImagePrac: View {
    
    let url = URL(string: "https://picsum.photos/400")
    
    var body: some View {
	
        AsyncImage(url: url, content: { returnedImage in
            returnedImage
                .resizable()
                .scaledToFit()
                .frame(width: 200, height: 200)
                .cornerRadius(20)
        }, placeholder: {
            ProgressView()
        })
        .frame(width: 100, height: 100)
    }
}

이미지가 로드 되는 동안 ProgressView()를 통해 끊김 없는 UI 제공

 

 

AsyncImagePhase

//열거형으로 이루어져 있음.
 //Getting load phases
 case empty
 No image is loaded.
 
 case success(Image)
 An image succesfully loaded.
 
 case failure(Error)
 An image failed to load with an error.

struct AsyncImagePrac: View {
    
    let url = URL(string: "https://picsum.photos/400")
    
    var body: some View {
        
                AsyncImage(url: url) { phase in
                    switch phase {
                    case .empty:
                        ProgressView()
        
                    case .success(let image):
                        image
                            .resizable()
                            .scaledToFit()
                            .frame(width: 200, height: 200)
                            .cornerRadius(20)
        
                    case .failure:
                        Image(systemName: "questionmark")
                            .font(.headline)
        
                    @unknown default:
                        Image(systemName: "questionmark")
                            .font(.headline)
                    }
                }
    }
}

아무런 이미지가 로드 되지 않았을 때, 이미지 로드에 성공했을 때, 이미지 로드에 성공했을 때 좀 더 세부적으로 분기처리를 할 수 있다.

 

@unknown

Swift의 switch문에서 exhaustive 하지 않은 경우 컴파일러 경고를 피하기 위해 필요한 문법.

Swift에서 enum의 케이스가 추가될 때, 이전에 작성한 코드에서 새로운 case 처리를 누락할 수도 있다.
@unknown default:를 사용하면 새로운 case를 처리하지 않아도 컴파일 경고가 발생하지 않는다.

 

위 코드에서는 이런 경고가 나와서 추가해주었다. 아마 이후 버전에 새로운 case가 추가 되려나봄..