[iOS] MVVM & RxSwift 스터디 W2 - TableView 만들어보기

iamchiwon/RxSwift_In_4_Hours

곰튀김님 강의 영상의 코드는 step1 ~ 4 까지 있는데요. step1 은 JSON 파일을 다운로드하는 작업을 비동기로 처리하고 이를 editView 에 띄워주는 것이고. step2 는 step1 과 같은 JSON 파일을 tableView 로 보여주는 코드에요. 강의에서 step2 는 패스하셔서 이를 연습해봤습니당 🧐

---

👀 MVVM + RxSwift TableView 예제 

step2 완성 코드에서는 타이머와 LOAD 버튼이 없지만, 다운로드 작업이 비동기로 되는지 확인하기 위해 타이머와 로딩 & 인디케이터 애니메이션을 냅뒀고, LOAD 버튼을 누를때마다 데이터가 갱신되도록 했어요!

RxSwift + MVVM TableView Example

---

🌱 MVVM 패턴 적용하기

강의가 MVVM + RxSwift 인 만큼, MVVM 패턴으로 구분하려면 어떻게 해야하지? 를 고민했습니다.

정확하게 구분되었을 지는 모르겠지만.. 다음과 같이 Model / View / View Model 을 구분했어요.

 

Model 은 기존 MVC 에서도 모델이니까 동일하지만, View / View Model 분리가 어려웠어요 🥺

로직 관점에서 필요한 코드는 View Model, UI 관점에서 필요한 코드는 View Controller 에 작성한다고 생각하시면 됩니다!

1. Model - View 에 보여줄 데이터

• members - List View Controller 에서 TableView 에 보여줄 Member 타입의 배열인 모델 데이터
• selectedMember - Detail View Controller 에서 상세하게 보여줄 Member 타입의 모델 데이터

Member 구조체 vs JSON data 형태

 

 

2. View (View Controller) - UI 작업들

• TableView, Cell 등 UI 와 관련된 작업은 스토리보드로 진행했습니다.
• View, View Controller 에서 데이터를 접근할 때에는 view Model 을 통해 접근하도록 합니다!
• TableView 에 데이터를 그리기 위해 BehaviorSubject 인 members 에  tableView.rx.items 를 bind 해주었습니다. * UITableViewDataSource 프로토콜의 기본메소드을 구현하는 것과 동일함.
• TableView 의 각 Cell 을 누를때마다 Detail VC 로 이동하기 위해, tableView.rx.modelSelected 를 subscribe 하여, Detail VC 로 이동하게끔 했습니다. * UITableViewDelegate 프로토콜의 didSelectRowAt 메소드와 동일함.
• 추가적으로 고려해야할 부분은 UITableViewCell 과 DetailVC 에서 이미지 다운로드에 대한 작업입니다!
• Member 구조체는 avatar 이미지에 대한 url 만 가지고 있기 때문에, 이를 다시 한번 비동기로 다운로드하는 작업이 필요해요!

👇 ListViewController / DetailViewController / MemberCell 자세히보기

[iOS] MVVM & RxSwift 스터디 W2 - TableView bind items, modelSelected, cell prepareForReuse

 

3. View Model - 실제 로직 관련된 작업

• View Model 은 UI에 독립적이며, 실제 로직에 관련된 작업들을 수행합니다! * UI 와 독립적이므로 Testable 합니다.
• View Model 은 model 을 갖고 있으며, 해당 예제에서는 members, selectedMember 라는 모델을 가지고 있습니다.
• 사실 이 예제는 모델을 가공하는 작업이 없기 때문에, JSON 데이터를 비동기로 다운로드받아 저장하는 작업만 수행하고 있어요.
• 이 때, APIManager.fetchData 메소드를 통해 반환받은 Observable<Data> 를 subscirbe 하여 onNext 이벤트 발생 시, map 을 통해 data -> [Member] 로 만들어주고, 해당 배열을 갖고 members (Subject) 의 onNext 를 방출하도록 합니다.

import Foundation
import RxSwift

class MemberViewModel {

    static let shared = MemberViewModel() // singleton
    var members = BehaviorSubject<[Member]>(value: [])
    var selectedMember = Member.EMPTY

    init() {
        reloadData()
    }
    
    func reloadData() {
        // Observable<Data> --> subscribe --> members
        _ = APIManager.fetchData(url: APIManager.MEMBER_LIST_URL)
            .map { data -> [Member] in
                let members = try! JSONDecoder().decode([Member].self, from: data)
                return members
            }
            .take(1) // 버튼 누를 경우에도 호출되므로, 1번만 수행하게끔 함
            .subscribe(onNext: { self.members.onNext($0) })
    }
}

 

4. APIManager - 네트워크 다운로드 비동기 작업

• URLSession 을 통해 data 를 다운로드하는 비동기 작업을 따로 APIManager 클래스 내에 메소드로 만들었습니다.
• APIManager.fetchData(url:) 메소드는 Observable<Data> 를 반환합니다.
• 이 메소드를 통해 생성된 Observable<Data> 를 subscribe 하여 members 모델 값을 변환시키고,
• 이미지 다운로드 작업시에도 Observable<Data> 를 subscribe 하여 UIImage 로 변환하도록 구현했습니다.

import Foundation
import RxSwift

class APIManager {
    
    static let MEMBER_LIST_URL = "https://my.api.mockaroo.com/members_with_avatar.json?key=44ce18f0"
    
    // JSON url -> Observable<Data> // --(subscribe)--> Member model
    // Image url -> Observable<Data> // --(subscribe)--> UIImage
    
    static func fetchData(url: String) -> Observable<Data> {
        return Observable.create() { emitter in
            let task = URLSession.shared.dataTask(with: URL(string: url)!) { data, response, error in
                // 데이터 수신 실패
                if let error = error {
                    emitter.onError(error)
                    return
                }
                // 데이터가 없을 때 http status code 전달
                guard let data = data else {
                    let httpResponse = response as! HTTPURLResponse
                    emitter.onError(NSError(domain: "no data", code: httpResponse.statusCode, userInfo: nil))
                    return
                }
                // 성공한 경우
                emitter.onNext(data)
                emitter.onCompleted()
            }
            task.resume()
            return Disposables.create {
                task.cancel() // dispose 될 경우
            }
        }
    }
}

---

 

전체 코드

 

songda515/MVVM_RxSwift

참고 링크

• RxCocoa 를 이용한 UITableView 의 DataSource & Delegate
• [RxSwift] bind, subscribe, drive