[iOS] Rx없이 구현하는 MVVM기초

MVVM 패턴을 사용하여 서버(API)에서 데이터를 가져와 테이블 뷰에 표시하는 예제

서버에서 직원 데이터 목록에 대한 리스폰스(response)를 제공하여 이 목록을 테이블 뷰에 표시한다.

MVVM 구성 요소의 개요와 역할

• 뷰 컨트롤러 (View Controller): UI 관련 작업만 수행한다. 예를 들어 정보 표시 및 가져오기 등의 작업이 있다. 뷰 컨트롤러는 뷰 레이어의 일부이다.
• 뷰모델 (View Model): 뷰 컨트롤러로부터 정보를 수신하고 이 모든 정보를 처리한 뒤 뷰 컨트롤러로 다시 보낸다.
• 모델 (Model): MVC에서와 같은 모델이다. 뷰모델이 사용하고 뷰모델이 새 업데이트 정보를 보낼 때마다 모델도 업데이트한다.

예제 동작 방식

1. 뷰 컨트롤러가 호출되면 뷰는 뷰 모델에 대한 참조를 갖게 된다.
2. 뷰는 사용자의 액션(user action)을 수행하고 뷰모델을 호출한다.
3. 뷰모델은 APIService를 요청하고 APIService는 뷰모델에 응답(response)을 보낸다.
4. 리스폰스(응답)를 받으면 뷰모델은 바인딩을 통해 뷰에 알린다.
5. 뷰는 데이터로 UI를 업데이트한다.

Model : Employees, EmployeeData

모델은 단순 데이터를 나타낸다. 단순히 데이터를 보유하고 비즈니스 로직과 아무 관련이 없다. 우리가 API에서 기대하는 단순한 데이터 구조이다.

API URL에 대한 리스폰스를 확인한 뒤 이 리스폰스에 대응하는 모델 클래스를 생성

// MARK: - Employee
struct Employees: Decodable {
    let status: String
    let data: [EmployeeData]
}
// MARK: - EmployeeData
struct EmployeeData: Decodable {
    let id, employeeName, employeeSalary, employeeAge: String
    let profileImage: String
    enum CodingKeys: String, CodingKey {
        case id
        case employeeName = "employee_name"
        case employeeSalary = "employee_salary"
        case employeeAge = "employee_age"
        case profileImage = "profile_image"
    }
}

ViewModel : EmployeesViewModel (추가전)

뷰 모델은 MVVM의 주요 구성 요소이다.

뷰모델은 뷰가 무엇인지 또는 뷰가 무엇을 하는지 결코 알지 못한다!

이를 통해 더욱 테스트가 가능하도록 만들고 뷰에서 복잡성을 제거한다.

뷰모델(EmployeesViewModel)에서 APIService 클래스를 호출하여 서버에서 데이터를 가져온다.

import Foundation

class EmployeesViewModel : NSObject {
    
    private var apiService : APIService!

	/*
     바인딩 코드 추가 될 곳

   */
    
    override init() {
        super.init()
        self.apiService =  APIService()
        callFuncToGetEmpData()
    }
    
    func callFuncToGetEmpData() {
        self.apiService.apiToGetEmployeeData { (empData) in
            self.empData = empData
        }
    }
}

API Service

APIService 클래스는 URLSession 클래스를 사용하여 직원 데이터를 가져오는 간단한 클래스이다. 여기에서 모든 네트워킹 모델을 사용하여 서버에서 데이터를 가져올 수 있다! 뷰모델 클래스에서 이 APIService 클래스를 호출한다.

import Foundation

class APIService :  NSObject {
    
    private let sourcesURL = URL(string: "<http://dummy.restapiexample.com/api/v1/employees>")!
    
    func apiToGetEmployeeData(completion : @escaping (Employees) -> ()){
        
        URLSession.shared.dataTask(with: sourcesURL) { (data, urlResponse, error) in
            if let data = data {
                
                let jsonDecoder = JSONDecoder()
                
                let empData = try! jsonDecoder.decode(Employees.self, from: data)
            
                    completion(empData)
            }
            
        }.resume()
    }
    
}

이렇게 뷰모델 클래스에서 API 리스폰스를 받을 수 있게 되었는데. 이제 뷰 컨트롤러와 뷰모델을 바인딩할 차례이다.

MVVM Bindings : Model Reference에 didset 추가 및 bind함수 추가

MVVM 바인딩은 MVVM에서 가장 중요한 역할을 한다.

뷰모델과 뷰 컨트롤러 간에 통신하는 방법이 중요한데 여러가지 방법으로 바인딩을 할 수 있다.

import Foundation

class EmployeesViewModel : NSObject {
    
    private var apiService : APIService!
//바인딩을 위해 추가된 코드 여기서 부터 
    private(set) var empData : Employees! {
        didSet {
            self.bindEmployeeViewModelToController()
        }
    }
    
    var bindEmployeeViewModelToController : (() -> ()) = {}
// 여기까지    

    override init() {
        super.init()
        self.apiService =  APIService()
        callFuncToGetEmpData()
    }
    
    func callFuncToGetEmpData() {
        self.apiService.apiToGetEmployeeData { (empData) in
            self.empData = empData
        }
    }
}

bindEmployeeViewModelToController라는 이름으로 뷰모델 클래스에 프로퍼티를 생성한다.

이 프로퍼티는 뷰 컨트롤러에서 클래스에서 호출해야 한다.

APIService에서 해당 결과를 검색하고 뷰에 변경 사항이 있음을 담을 직원(모델) 유형의 empData라는 이름으로 뷰모델 클래스에 생성한다.

empData는 API 서비스에서 받은 응답이 담기게 된다.

프로퍼티 옵저버를 이용하여 API의 응답으로 empData에 값을 받는 즉시 empData의 didSet을 호출하고 empData의 didSet 내부에서 bindEmployeeViewModelToController()를 호출한다.

뷰모델에서 데이터를 수신하면 이제 UI를 업데이트할 차례이다!

View: ViewController

뷰모델 클래스에서 데이터를 수신하려면 뷰 컨트롤러 클래스 내부에 뷰모델을 가지고 있어야 한다.

import UIKit

class ViewController: UIViewController {
    
    
    @IBOutlet weak var employeeTableView: UITableView!
    
    private var employeeViewModel : EmployeesViewModel!
    
    private var dataSource : EmployeeTableViewDataSource<EmployeeTableViewCell,EmployeeData>!
    

    override func viewDidLoad() {
        super.viewDidLoad()
        callToViewModelForUIUpdate()
    }
    
    func callToViewModelForUIUpdate(){
        
        self.employeeViewModel =  EmployeesViewModel()
        self.employeeViewModel.bindEmployeeViewModelToController = {
            self.updateDataSource()
        }
    }
    
    func updateDataSource(){
        
        self.dataSource = EmployeeTableViewDataSource(cellIdentifier: "EmployeeTableViewCell", items: self.employeeViewModel.empData.data, configureCell: { (cell, evm) in
            cell.employeeIdLabel.text = evm.id
            cell.employeeNameLabel.text = evm.employeeName
        })
        
        DispatchQueue.main.async {
            self.employeeTableView.dataSource = self.dataSource
            self.employeeTableView.reloadData()
        }
    }
    
}

DataSource : EmployeeTableViewDataSource

UI를 업데이트하기 위해 뷰 컨트롤러에 테이블 뷰 코드를 작성할 수도 있지만 뷰 컨트롤러가 더 깔끔하게 만들기 위해 UITableViewDataSource  를 구현한 EmployeeTableViewDataSource 가 만들어져 있다.

import Foundation
import UIKit

class EmployeeTableViewDataSource<CELL : UITableViewCell,T> : NSObject, UITableViewDataSource {
    
    private var cellIdentifier : String!
    private var items : [T]!
    var configureCell : (CELL, T) -> () = {_,_ in }
    
    
    init(cellIdentifier : String, items : [T], configureCell : @escaping (CELL, T) -> ()) {
        self.cellIdentifier = cellIdentifier
        self.items =  items
        self.configureCell = configureCell
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        items.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
         let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as! CELL
        
        let item = self.items[indexPath.row]
        self.configureCell(cell, item)
        return cell
    }
}

EmployeeTableViewCell

import UIKit

class EmployeeTableViewCell: UITableViewCell {
    
    
    @IBOutlet weak var employeeIdLabel: UILabel!
    @IBOutlet weak var employeeNameLabel: UILabel!
    
    var employee : EmployeeData? {
        didSet {
            employeeIdLabel.text = employee?.id
            employeeNameLabel.text = employee?.employeeName
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

Reference

MVVM in iOS Swift