[Swift] MVVM 간단하게 알아보기

https://www.pexels.com/ko-kr/photo/1786512/

 

정의

오브젝트를 Model, View, ViewModel로 분리하는 디자인 패턴

 

Model

• 데이터 구조 정의
• 애플리케이션에서 필요한 데이터를 가지고 있음
• structs 혹은 아주 간단한 class로 구현

View

• 사용자와 상호 작용하고 이벤트가 발생하거나 데이터를 요청할 경우 ViewModel에게 알려줌
• UI를 표시하기 위한 코드를 포함하고 이 외에 ViewModel에 있는 비즈니스 로직을 호출하는 코드가 들어 있음

ViewModel

• view로 부터 사용자의 상호작용을 받고 이에 맞는 이벤트를 처리하게 됨
• UIKit 불필요
• 데이터를 업데이트 하고 뷰 요소를 업데이트함
• model 정보 view에 fetch 하기 위해 그 값을 변경 (뷰에 보여주기 위해 데이터 처리를 한다는 뜻)

 

장점 

• 기존 MVC에서 많은 역활을 담당하던 ViewController의 역활을 ViewModel에서 처리할 수 있음

단점

• 설계 어려움 (전체다 MVVM을 가질 필요는 없음. 필요한 곳에서 MVVM으로 구현)
• 뷰에 대한 처리 복잡할 수록 ViewModel의 크기가 커짐

 

 

tutorial

전체 코드 링크 👉🏻  깃허브 바로가기

Model 생성

사용한 api : https://jsonplaceholder.typicode.com/posts

• userId, id, title, body 가 하나의 post, post를 어레이로 반환하는 api

import Foundation

typealias Posts = [Post]
struct Post: Codable {
    let userID, id: Int
    let title, body: String

    enum CodingKeys: String, CodingKey {
        case userID = "userId"
        case id, title, body
    }
}

• Model 폴더에 Post.swift 파일을 생성함.
• json 구조를 Codable로 정의
• 팁: https://app.quicktype.io/ json 을 여기에 복붙하면 멋진 데이터 모델 코드를 만들어 줍니다! 다만 변수명, 클래스명 이런거 변경해야 할 수도 있고 수정이 필요한 경우도 있으니 테스트 할 때만 참고...

Service 생성

import Foundation

class PostNetworkManager {
    static let shared = PostNetworkManager()
    private init() { }
    
    func getPosts(completion: @escaping (Bool, Posts?) -> ()) {
        guard let url = URL(string: "https://jsonplaceholder.typicode.com/posts") else {
            return
        }
        
        URLSession.shared.dataTask(with: url) { data, response, error in
            guard error == nil else {
                completion(false, nil)
                print("error ::: \(error!)")
                return
            }
            
            guard let response = response as? HTTPURLResponse, (200 ..< 300) ~= response.statusCode else {
                completion(false, nil)
                return
            }
            
            do {
                let model = try JSONDecoder().decode(Posts.self, from: data!)
                completion(true, model)
            } catch {
                completion(false, nil)
            }
        }.resume()
    }
}

• Service 폴더에 PostNetworkManager.swift 파일 생성
• 네트워킹 싱글톤 생성
• Post 모델로 decode 해서 [Post] 배열 반환 (코드에서는 Posts)

ViewModel 생성

import Foundation

class PostViewModel {
    var tableReload: (() -> Void)?
    var posts: Posts? = [Post]() {
        // 테이블 뷰 리로드 처리
        didSet {
            tableReload?()
        }
    }
    
    func fetchData() {
        PostNetworkManager.shared.getPosts { success, data in
            if success {
                self.posts = data
            } else {
                // 에러 처리
            }
            
        }
    }
}

• ViewModel은 비즈니스 로직, 데이터 request 및 가공 등을 처리함. UIKit 임포트 불필요
• ViewController에는 UI 관련된 코드를 포함하고 데이터나 비즈니스 로직을 ViewModel에 포함시킴
• UITableViewCell의 데이터를 가공하는 ViewModel을 생성하기도 함
• 데이터의 가공도 ViewModel에서 처리

View 생성

import UIKit

class PostViewController: UIViewController {
    
    @IBOutlet weak var tableView: UITableView!
    let viewModel = PostViewModel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        tableView.backgroundColor = .gray
        tableView.delegate = self
        tableView.dataSource = self
        
        tableView.register(PostTableViewCell.nib, forCellReuseIdentifier: PostTableViewCell.identifier)
        
        viewModel.tableReload = {
            DispatchQueue.main.async {
                self.tableView.reloadData()
            }
        }
        viewModel.fetchData()
    }
}

extension PostViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return viewModel.posts?.count ?? 0
    }
}

extension PostViewController: UITableViewDelegate {
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableView.automaticDimension
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: PostTableViewCell.identifier, for: indexPath) as? PostTableViewCell else {
            return UITableViewCell()
        }
        if let data = viewModel.posts?[indexPath.row] {
            cell.data = data
        }
        
        return cell
    }
}

 

 

import UIKit

class PostTableViewCell: UITableViewCell {
    
    @IBOutlet weak var userLabel: UILabel!
    @IBOutlet weak var idLabel: UILabel!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var bodyLabel: UILabel!
    
    var data: Post? {
        didSet {
            userLabel.text = "\(data?.userID ?? 0)"
            idLabel.text = "\(data?.id ?? 0)"
            titleLabel.text = data?.title
            bodyLabel.text = data?.body
        }
    }
    
    static var identifier: String {
        return String(describing: self)
    }
    
    static var nib: UINib {
        return UINib(nibName: identifier, bundle: nil)
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        
    }

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

 

 

참고 도서 및 웹페이지

코드는 아래 출처에서 가져오지 않아서 코드 옮기실때 출처 표기 부탁드려요!

How to implement MVVM pattern with Swift in iOS | John Codeos - Blog with Free iOS & Android Development Tutorials