[UIKit] 웹이미지 다운받기(비동기 처리) -Closure, RxSwift

🧸  시작

이미지뷰와 버튼을 통해서 웹 이미지를 다운받아 보는 방법이다.

간단하게 버튼을 누르면 이미지가 나타나는 기능을 구현할 것이다.

이번에는 코드베이스가 아닌 스토리보드로 진행할 것이다.

 

 

🧸  스토리보드에 ImageView(이미지뷰)와 Button(버튼)을 추가한다.

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var loadImageBtn: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }

    @IBAction func didTabLoadImageBtn(_ sender: Any) {
        
    }
}

• 이미지뷰와 버튼을 생성해주고 버튼 클릭이벤트도 생성해준다.

버튼을 클릭하면 IMAGEURL 의 웹이미지가 imageView에 나오는 기능을 구현할 것이다.

클로저를 이용한 방법과 RxSwift를 이용할 것이다.

 

 

 

🧸  Closure 를 이용한 방식

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var loadImageBtn: UIButton!
    
    let IMAGEURL = "https://picsum.photos/1200/800"
    var cancelable: URLSessionTask?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }

    @IBAction func didTabLoadImageBtn(_ sender: Any) {
        imageView.image = UIImage(systemName: "photo")
        
        cancelable = loadImage(url: IMAGEURL) { image in
            DispatchQueue.main.async {
                self.imageView.image = image
            }
        }
    }
    
    func loadImage(url: String, completion: @escaping (UIImage?) -> Void) -> URLSessionTask {
        let task = URLSession.shared.dataTask(with: URL(string: url)!) { data, _, _ in
            guard let data = data else {
                completion(nil)
                return
            }
            let image = UIImage(data: data)
            completion(image)
        }
        task.resume()
        return task
    }
}

• func loadImage(url: String, completion: @escaping (UIImage?) -> Void) -> URLSessionTask {
  • 웹이미지의 URL을 String 파라미터로 받는다, completion 블럭을 이용하여 UIImage의 결과값을 받는 메소드이다.
  • URLSession 을 통해서 웹 데이터를 가져온다.
  • String으로 받은 URL의 데이터가 없다면 return 을 하고 데이터가 있을 때 UIImage data 로 반환하여 결과로 보낸다.
  • 메소드가 끝나고 이미지를 다운받아 task를 반환한다.

• @IBAction func didTabLoadImageBtn(_ sender: Any) {
  
  • Load Image 버튼을 클릭했을 때 실행되는 메소드이다.
  • imageView의 기본 이미지를 시스템이미지인 Photo로 지정해준다.
  • URLSessionTask 객체를 호출하여 위의 이미지를 다운받는 메소드를 호출한다.
  • loadImage 메소드가 completion 블럭으로 구현되어있기에 클로저를 이용하여 받아온 UIImage 결과값을 비동기처리를 이용하여 UIImageView에 뿌려준다.

 

 

---

🧸  RxSwift 를 이용한 방식

먼저 Pod install 을 통해 RxSwift 를 설치한다.

import UIKit
import RxSwift

class ViewController: UIViewController {
    
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var loadImageBtn: UIButton!
    
    let IMAGEURL = "https://picsum.photos/1200/800"
    var cancelable: Disposable?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }

    @IBAction func didTabLoadImageBtn(_ sender: Any) {
        imageView.image = UIImage(systemName: "photo")
        
        cancelable = loadImage(url: IMAGEURL)
            .observe(on: MainScheduler.instance)
            .subscribe(onNext: {
                self.imageView.image = $0
            })
    }
    
    func loadImage(url: String) -> Observable<UIImage?> {
        return Observable.create { emittor in
            let task = URLSession.shared.dataTask(with: URL(string: url)!) { data, _, _ in
                guard let data = data else {
                    emittor.onNext(nil)
                    emittor.onCompleted()
                    return
                }
                let image = UIImage(data: data)
                emittor.onNext(image)
                emittor.onCompleted()
            }
            task.resume()
            return Disposables.create {
                task.cancel()
            }
        }
    }
}

2023.03.05 - [SWIFT/Swift] - [Swift] RxSwift 기본 개념

[Swift] RxSwift 기본 개념

 

 

 

 

 

 

 

 

[예제 소스코드 깃허브 링크]

https://github.com/HANLeeeee/PracticeTest/tree/main/ImageLoadTest

GitHub - HANLeeeee/PracticeTest

 

[참고자료]

https://youtu.be/G_22bAj9m0w