구글링을 통해 얻은 뉴스 정보를 뿌려주는 MVVM셈플 코드를 분석해보자

1. 그림을 통해 MVVM의 코드 구조를 확인해 보자.

핵심은 뷰가 모델에 의존하지않고 뷰모델을 의존하고 뷰모델이 모델에 의존하게 만드는 구조인거같다.

각 부분별로 분석해보자

1. Model

서비스에 사용되는 데이터 구조를 정의하고 뷰모델에게 결과를 알려준다.

import Foundation

struct ArticleList: Decodable{
    let articles: [Article]
}

struct Article: Decodable{
    let title : String?
    let description: String?
}

Article객체가 저장된 리스트와 Article객체를 정의하고 있다.

서버와 통신, 내부 DB 통신해 얻은 결과를 자신의 서비스에 필요한 값을 추출해 저장하는거 같다.

2. View

ViewController에 작성될 코드이다 View는 모델에 의존하지 않고 ViewModel을 통해 데이터에 접근해야 하는것 같다.

import UIKit

class NewListTableViewController: UITableViewController {
    private var articleListVM : ArticleListViewModel!
    private let NewsURL = "<https://newsapi.org/v2/top-headlines?country=us&apiKey=e9b514c39c5f456db8ed4ecb693b0040>"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setup()
    }
    
    private func setup(){
        self.navigationController?.navigationBar.prefersLargeTitles = true
        
        let url = URL(string:self.NewsURL)!
        WebService().getArticles(url: url) { (articles) in
            if let articles = articles {
                self.articleListVM = ArticleListViewModel(articles: articles)
            }
            DispatchQueue.main.async {
                self.tableView.reloadData()
            }
        }
    }
}
extension NewListTableViewController{
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.articleListVM.numberOfRowsInSection(section)
    }
    
    override func numberOfSections(in tableView: UITableView) -> Int {
        return self.articleListVM == nil ? 0 : self.articleListVM.numberOfSections
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "ArticleTableViewCell", for: indexPath) as? ArticleTableViewCell
        else{fatalError("No Matched article TableViewCellidentifier")}
        
        let articleVM = self.articleListVM.articleAtIndex(indexPath.row)
        cell.descriptionLabel?.text = articleVM.description
        cell.titleLable?.text = articleVM.title
        return cell
    }
}

각 메소드 별로 정리를 해보자

setup()

셋업은 웹서비스를 의존하고 있고 해당 클래스를 통해 서버와 통신 서비스에서 반환된 Model을 자신의 뷰모델에 저장한다.

-의문점