[SwiftUI] AsyncImage in SwiftUI

AsyncImage in SwiftUI

AsyncImage는 SwiftUI에서 비동기로 이미지를 로드하고 표시하는 간단한 방법을 제공.

주로 네트워크 URL에서 이미지를 로드할 때 사용. iOS 15 이상에서 사용할 수 있음.

---

1. AsyncImage의 기본 사용법

struct AsyncImageExample: View {
    var body: some View {
        AsyncImage(url: URL(string: "<https://example.com/image.jpg>"))
    }
}

• URL: 네트워크에서 이미지를 가져올 URL.
• 기본적으로, AsyncImage는 이미지를 다운로드하고 성공적으로 로드되면 표시.

---

2. 기본 Placeholder와 비동기 처리

이미지가 로드되는 동안 또는 로드에 실패한 경우의 처리를 위해 AsyncImage는 클로저를 제공.

struct AsyncImageExampleWithPlaceholder: View {
    var body: some View {
        AsyncImage(url: URL(string: "<https://example.com/image.jpg>")) { phase in
            if let image = phase.image {
                // 성공적으로 로드된 이미지
                image
                    .resizable()
                    .scaledToFit()
            } else if phase.error != nil {
                // 로드 실패
                Text("Failed to load image")
                    .foregroundColor(.red)
            } else {
                // 로드 중
                ProgressView()
            }
        }
        .frame(width: 200, height: 200)
    }
}

단계별 작동 방식

1. 로드 중: phase는 nil 상태이며 로딩 중 Placeholder(예: ProgressView)를 표시.
2. 성공: phase.image에 성공적으로 로드된 이미지가 포함됨.
3. 실패: phase.error에 오류가 저장되고 이를 통해 실패 처리를 수행 가능.

---

3. 스타일 조정

AsyncImage는 로드된 이미지를 수정하는 데 사용할 수 있는 다양한 뷰 수정자를 지원.

struct StyledAsyncImage: View {
    var body: some View {
        AsyncImage(url: URL(string: "<https://example.com/image.jpg>")) { image in
            image
                .resizable()
                .scaledToFill()
                .clipShape(Circle())
                .shadow(radius: 10)
        } placeholder: {
            ProgressView()
        }
        .frame(width: 100, height: 100)
    }
}

---

4. AsyncImage 초기화 방식

기본 초기화

AsyncImage(url: URL(string: "<https://example.com/image.jpg>"))

• 단순히 이미지를 로드하고 표시.
• 기본 스타일(aspectFit)로 표시.

Placeholder와 함께 사용

AsyncImage(url: URL(string: "<https://example.com/image.jpg>")) { phase in
    if let image = phase.image {
        image.resizable().scaledToFit()
    } else {
        ProgressView() // 로드 중 Placeholder
    }
}

---

5. AsyncImage의 고급 옵션: Content Configuration

비동기 이미지 로드 시, 다운로드 중, 성공 또는 실패 상태에 따라 다양한 컨텐츠를 제공할 수 있음.

AsyncImage(
    url: URL(string: "<https://example.com/image.jpg>"),
    content: { image in
        image
            .resizable()
            .scaledToFit()
    },
    placeholder: {
        ProgressView() // Placeholder로 로딩 표시
    }
)

---

6. 이미지 캐싱과 성능

AsyncImage는 네트워크에서 이미지를 가져올 때 기본적으로 URLSession을 사용.

iOS에서 URLSession은 기본적으로 캐싱을 지원하지만, 고급 캐싱 전략이 필요하면 서드파티 라이브러리(예: Kingfisher, SDWebImage)를 고려.

---

7. 실전 예제: picsum 이미지 불러오기

struct RandomImageView: View {
    let url = URL(string: "<https://picsum.photos/200/300>")
    
    var body: some View {
        AsyncImage(url: url) { data in
            switch data {
            case .empty:
                ProgressView()
                    .frame(width: 200, height: 300)
            case .success(let image):
                image
                    .resizable()
                    .scaledToFill()
                    .frame(width:200, height: 300)
            case .failure(_):
                Text("이미지를 불러오지 못했습니다.")
            @unknown default:
                Text("")
            }
        }
    }
}

이미지 로드 중	이미지 로드 성공	이미지 로드 실패