[SwiftUI-기초] 비동기적 이미지 뷰 - AsyncImage()

• Image() 로 Assets 에 있는 로컬 이미지를 다룰 수 있는 것과 같이 원격지에 있는 이미지를 다룰 수 있는 뷰
• 둘의 차이
  • AsyncImage는 비동기적으로 뷰를 업데이트 한다
  • AsyncImage는 컴파일 타임에는 이미지의 정확한 크기를 모른다. 
• 여기서 발생하는 차이를 이용해서 뷰를 그려보기

AsyncImage 기본 사용법

AsyncImage(url: URL(string: "https://hws.dev/img/logo.png"))

• 기본적으로 화면에 담기지 않음, 크기 조정이 필요

크기 조정

AsyncImage(url: URL(string: "https://hws.dev/img/logo.png"), scale: 3)

정확한 사이즈 지정

• 원격지에 있는 이미지이다 보니 정확한 사이즈를 알기 어려움
• 이미지를 가져오는 미래시점의 이미지를  콜백 클로저로 핸들링함

AsyncImage(url: URL(string: "https://hws.dev/img/logo.png")) { image in
    image
        .resizable()
        .scaledToFit()
} placeholder: {
    Color.red
}
.frame(width: 200, height: 200)

에러 처리

AsyncImage(url: URL(string: "https://hws.dev/img/bad.png")) { phase in
    if let image = phase.image {
        image
            .resizable()
            .scaledToFit()
    } else if phase.error != nil {
        Text("There was an error loading the image.")
    } else {
        ProgressView()
    }
}
.frame(width: 200, height: 200)

• 원격지 이미지를 가져오는 경우 여러 장애 상황이 가정
  • 네트워크 오프라인, URL 주소 에러, 다운로드 실패 등등...
• if let : 이미지가 성공적으로 가져와졌을 때
• else if: 에러가 존재할 때
• else : 다운로드가 진행중이거나 그 외의 상황
  • ProgressView(): 로딩 돌아가는 화면

ProgressView()