Refreshable: 당겨서 새로고침 적용하기

 

UIKit에서의 UIRefreshControl이 있다면 SwiftUI에서는 refreshable 수정자를 통해 쉽게 처리할 수 있습니다.

 

 

사용법

 

refreshable 적용:
refreshable 모디파이어는 List나 ScrollView와 같은 스크롤 가능한 뷰에 적용할 수 있습니다. 사용자가 뷰를 아래로 당길 때 실행할 비동기 작업을 정의합니다.

import SwiftUI

struct ContentView: View {
    @State private var items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
        }
        .refreshable {
            await fetchData()
        }
    }

    func fetchData() async {
        // 데이터 로드 또는 갱신 작업 수행
        try? await Task.sleep(nanoseconds: 1_000_000_000) // 1초 지연
        items.append("New Item \(items.count + 1)")
    }
}

위 코드에서 List에 refreshable 모디파이어를 적용하여, 사용자가 리스트를 아래로 당길 때 fetchData() 비동기 함수가 호출됩니다.

---

주의사항

1. iOS 버전 호환성: refreshable은 iOS 15 이상에서만 사용할 수 있습니다.

iOS 14 이하의 버전과 호환하려면 직접 기능을 구현해야 합니다. 다행히 구현 방법이 그렇게 어렵지 않으므로 다음번에 포스팅하도록 하겠습니다.

 

 

2. 비동기 작업 관리: refreshable 모디파이어 내에서 실행되는 비동기 작업은 async/await 구문을 사용하여 정의해야 합니다. UIRefreshControl에서처럼 endRefreshing 호출을 할 필요는 없습니다. 작업이 완료되면 자동으로 새로고침 상태가 종료됩니다.

---

References

https://developer.apple.com/documentation/swiftui/view/refreshable(action:)