[Swift] MVVM 응용편

Matt Hardy  님의 사진, 출처:  Pexels

RxSwift + MVVM을 사용하다가 RxSwift가 없는 MVVM을 사용하니 RxSwift 의 장점이 확실히 느껴지는거 같아요 

저번 포스팅에서 MVVM에 대해 간단하게 정리해 두었는데 👇

2022.06.04 - [🍎 iOS/Architecture Pattern] - [Swift/Architecture] MVVM 이해하기

MVVM은 Model - View - ViewModel로 나누는 것이 다가 아닌 View와 ViewModel의 상호 작용에 대해서 더 깊게 다뤄 볼 필요가 있어서 정리해 보았습니다 🦑

---

MVC의 문제점

기존 MVC의 경우 Massive ViewController의 약자이다~ 라는 말이 있을 정도로 ViewController의 역활이 컸습니다

UI를 로드하고 사용자의 이벤트를 받고, 비즈니스 로직을 처리하고... 그러다가 이렇게 방대한 ViewController 역활의 일부를 담당하는 ViewModel이 있는 MVVM 패턴이 등장하게 되었습니다

 

MVVM이란

View에서 사용자와 상호작용하여 이벤트를 받으면 이 사실을 ViewModel에 알리게 됩니다. ViewModel은 비즈니스 로직을 처리하게 되는데 여기에는 네트워킹도 포함됩니다

View는 UI와 유저간의 상호작용을 위한 코드가 포함되고 ViewModel은 이 이벤트에 맞는 비즈니스 로직을 작성하게 되는 것이죠!

이렇게 하면 ViewModel이 이전에 ViewController에서 작성했던 코드를 일부 가져가면서 UI와 독립적이기 때문에 테스트도 더 쉬워 집니다

ViewModel은 Model에게 업데이트를 요청하고 데이터 모델은 변경되면 이 사실을 ViewModel에게 알립니다 (이건 코드로 보는게 더 좋습니담)

 

MVVM 에서 생각해 볼 것 🤔

View 가 ViewModel을 own 하고 있기 때문에 View에서 ViewModel에 접근이 가능합니다

그러나! ViewModel은 비즈니스 로직을 처리하고 UI를 업데이트 하기 위해서 어떻게 View에게 알려주어야 할까요?

ViewModel도 View를 own 하게 되면 순환 참조가 걸릴텐데 말이에요

이때 사용해 줄 수 있는게 클로저, notification, delegate를 사용해 줄 수도 있는데 Observable 객체를 만들어서 관리하는 방법이 있습니다 (Combine이나 RxSwift를 해보셨다면 익숙하실 거에요!)

---

파일 디렉토리 구조 미리보기

모든 코드를 작성하고 나면 이런 구조를 가지게 됩니다! 우선 Service 부터 진행하겠습니다!

전체 코드는 이 링크를 누르시면 됩니다 👉🏻  깃허브 링크

 

API와 네트워킹

우선 사용할 api를 소개하겠숩니다

https://jsonplaceholder.typicode.com 를 사용하겠습니다🙌🏻

네트워킹 -> 통신 성공 -> json decoding 이렇게 해줄 겁니다! 

/users/2를 하면 user id 2의 사용자 정보를 json으로 반환합니다 

구조를 미리보면 이렇습니다! 많은 정보를 반환해 주지만 MVVM이 주인공이기 때문에 UI와 사용할 데이터는 간단하게 작성해 주겠습니다

이번 포스팅에서는 'username', 'email'만 사용해 줍니다!

 

import Foundation

class NetworkManager {
    static let shared = NetworkManager()
    private init() { }
    
    func getUser(completion: @escaping (Bool, User?) -> ()) {
        guard let url = URL(string: "https://jsonplaceholder.typicode.com/users/2") 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(User.self, from: data!)
                completion(true, model)
            } catch {
                completion(false, nil)
            }
        }.resume()
    }
}

이번 포스팅에서는 하나의 api 만 사용해 주기 때문에 범용적으로 작성하지 않았습니다

NetworkManager는 Singleton 으로 네트워크 통신 후 성공하면 json을 User 객체로 디코딩 합니다. 이제 User을 작성해 주겠습니다

 

Model 작성하기

위 정보에서 'username'과 'email'만 사용할 것이기 때문에 간단하게 Model을 작성해보겠습니다

import Foundation

struct User: Codable {
    enum CodingKeys: String, CodingKey {
    	case userName = "username"
        case email
    }
    
    let userName: String
    let email: String
}

여기서 전체 모든 데이터에 대해 모델 클래스를 작성할 필요는 없지만

혹시 전체 데이터 구조에 관해 Model을 작성하고 싶으신 경우 아래 코드를 참고해 주세요!

// ⭐️ api 모든 정보에 대한 모델 클래스

import Foundation

struct User: Codable {
    enum CodingKeys: String, CodingKey {
        case id, name, email, address, phone, website, company
        case userName = "username"
    }
    
    let id: Int
    let name: String
    let userName: String
    let email: String
    let address: Address
    let phone: String
    let website: String
    let company: Company
}

struct Address: Codable {
    enum CodingKeys: String, CodingKey {
        case street, suite, city, geo
        case zipCode = "zipcode"
    }
    
    let street: String
    let suite: String
    let city: String
    let zipCode: String
    let geo: Geo
    
}

struct Geo: Codable {
    enum CodingKeys: String, CodingKey {
        case lat, lng
    }
    
    let lat: String
    let lng: String
}

struct Company: Codable {
    enum CodingKeys: String, CodingKey {
        case name, catchPhrase, bs
    }

    let name: String
    let catchPhrase: String
    let bs: String
}

네트워킹에 성공하면 json api는 모델 클래스인 User로 디코딩 됩니다. 이 Model이 업데이트 되어 ViewModel에게 전달 되는 것!

이제 View를 작성하겠습니다

 

View 작성하기

import UIKit

class UserViewController: UIViewController {
    
    let nameLabel = UILabel()
    let emailLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        nameLabel.backgroundColor = .gray
        emailLabel.backgroundColor = .yellow
        
        nameLabel.text = "이름입니다"
        emailLabel.text = "이메일입니다"

        attachUI()
    }

    func attachUI() {
        view.addSubview(nameLabel)
        view.addSubview(emailLabel)
        
        nameLabel.translatesAutoresizingMaskIntoConstraints = false
        nameLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true
        nameLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true
        nameLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        
        emailLabel.translatesAutoresizingMaskIntoConstraints = false
        emailLabel.leadingAnchor.constraint(equalTo: nameLabel.leadingAnchor).isActive = true
        emailLabel.trailingAnchor.constraint(equalTo: nameLabel.trailingAnchor).isActive = true
        emailLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor).isActive = true
    }
}

위 코드를 실행하면 이렇게 허접한 UI가 나타납니다 🥲

간단하게 코드로 작성해 두었으니 복사해서 붙여넣으시면 됩니다

UserViewController.swift 에서는 UI에 대한 코드가 있습니다. 이때 네트워킹 해서 데이터를 가지고 오고 이 데이터를 UI에 보여주려면 이전에 작성해 두었던 NetworkManager 을 호출해서 네트워킹을 해야 합니다

이 네트워킹은 비즈니스 로직으로 MVVM에서는 UI를 담당하고 유저와의 인터렉션을 담당하는 View의 역활이 아닌 ViewModel의 역활입니다

이제 ViewModel을 작성해 주겠습니다

 

ViewModel 작성하기

import Foundation

final class UserViewModel {
    
    func fetchData() {
        NetworkManager.shared.getUser { [weak self] isSuccess, data in
            if isSuccess {
            
            }
        }
    }
}

UserViewModel.swift 파일에 위 코드를 작성합니다

ViewModel은 네트워킹을 시작하는 함수인 fetchData()를 포함합니다

private let viewModel = UserViewModel()

UserViewController.swift에 viewModel 프로퍼티를 추가해줍니다. 이제 UserViewController의 viewDidLoad에서 attachUI() 아래에 코드를 추가합니다

viewModel.fetchData()

attachUI() 후 viewModel에 있는 fetchData()함수를 실행해 네트워킹을 시작합니다

ViewController는 ViewModel에 접근이 가능하기 때문에 ViewModel의 비즈니스 로직을 실행했지만 ViewModel은 어떻게 ViewController에게 네트워킹을 성공적으로 끝내고 업데이트 한 Model을 전달 할 수 있을까요?

 

여기에 클로저, 델리게이트, 노티피케이션을 사용할 수 있지만 ObservableObject를 사용하겠습니다

 

ObservableObject 작성하기

RxSwift에 Observable이 있습니다. 이름에서 유추 가능하 듯이 변화 관측 가능한 객체 입니다

import Foundation

class ObservableObject<T> {
	//👉🏻 1
    var value: T {
        didSet {
            listener?(value)
        }
    }
    
    //👉🏻 2
    private var listener: ((T) -> Void)?
    
    //👉🏻 3
    init(_ value: T) {
        self.value = value
    }
    
    //👉🏻 4
    func bind(_ listener: @escaping (T) -> Void ) {
        listener(value)
        self.listener = listener
    }
}

천천히 살펴보겠습니다!

우선 1번이 아닌 2번 부터 보겠습니다

private var listener: ((T) -> Void)?

listener는 클로저입니다. T 객체를 가지고 코드를 실행합니다! 

    var value: T {
        didSet {
            listener?(value)
        }
    }

value는 제네릭으로 다양한 타입의 객체를 받습니다. 이때 value의 값이 변경이 되면 didSet 내부에 있는 코드가 실행됩니다

클로저인 listener에게 변경된 value 값을 전달하고 listener는 이 value를 가지고 내부의 코드를 실행하게 되는 거죠

즉 여기서 value가 Observable 즉, 관찰 가능한 객체입니다! Model이 업데이트 되면 -> UI를 업데이트한다

여기서 T가 Model이고 UI 업데이트 코드는 listener에 포함되어 있는 것입니다

그렇다면 value는 viewModel에서 그 값을 업데이트 해주고 

UI 업데이트를 시도하는 listener는 View에서 접근하면 => Model(여기서는 value) 변경 되면서 UI 업데이트 실행

이렇게 할 수 있습니다 🙌🏻

listener는 View에서 접근해서 설정해 주면 listener가 view 업데이트 코드를 가지고 있겠죠?

View에서 listener를 받을 수 있도록

    func bind(_ listener: @escaping (T) -> Void ) {
        listener(value)
        self.listener = listener
    }

4번 코드 블록을 작성해 줍시다

    init(_ value: T) {
        self.value = value
    }

3번 코드 블록은 ViewModel에서 관찰 가능한 객체를 설정해 줄 수 있도록 이니셜라이저에서 해당 객체를 받는 다는 것을 알 수 있습니다. 

다시 ViewModel로 돌아가보겠습니다

 

ViewModel 완성하기

import Foundation

final class UserViewModel {
    var data: ObservableObject<User?> = ObservableObject(nil)
    
    func fetchData() {
        NetworkManager.shared.getUser { [weak self] isSuccess, data in
            if isSuccess {
                self?.data.value = data
            }
        }
    }
}

옵저빙할 User 객체 타입을 value 타입으로 받는 ObservableObject인 data 프로퍼티를 추가해 줍니다

그 후 네트워킹에 성공하면 ObservableObject의 value를 업데이트 해줍니다

이 플로우대로 실행이 되면 최종적으로 

    var value: T {
        didSet {
            listener?(value)
        }
    }

ObservableObject의 value의 didSet 코드가 실행되면서 listener가 실행되겠죠?

이제 listener을 설정해 주겠습니다

 

View 완성하기

import UIKit

class UserViewController: UIViewController {
    private let viewModel = UserViewModel()
    
    let nameLabel = UILabel()
    let emailLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        nameLabel.backgroundColor = .gray
        emailLabel.backgroundColor = .yellow
        
        nameLabel.text = "이름입니다"
        emailLabel.text = "이메일입니다"
        
        setupBinders() // ⭐️ 1
        attachUI()
        
        viewModel.fetchData()
    }
    
    // ⭐️ 2
    func setupBinders() {
        viewModel.data.bind { [weak self] user in
            guard let user = user else { return }
            DispatchQueue.main.async {
                self?.nameLabel.text = user.userName
                self?.emailLabel.text = user.email
            }
        }
    }

    func attachUI() {
        // 생략 ...
    }
}

우선 2번 코드의 setupBinders() 메소드를 추가해 줍니다. 

이 메소드에서는 viewModel의 ObservableObject의 listener를 설정해 줍니다. bind를 이용해서 value 값이 업데이트 되면 실행될 listener 클로저를 작성해 줍니다. 

이때 전달 받는 value 타입은 ViewModel에서 ObservableObject에서 설정해 준 User 입니다!

 

user가 nil이 아니라면 UI를 업데이트 해줍니다. 이때 클로저 내부에서 실행되기 때문에 메인스레드로 변경하는 작업이 필요 합니다.

 

1번 코드 setupBinders()를 추가해주면 됩니다!

 

완성

플레이스홀더가 살짝 보였다가 네트워킹이 끝나고 UI가 업데이트 된 것을 확인할 수 있습니다!

 

 

참고 사이트

https://www.youtube.com/watch?v=sbYaWJEAYIY <- 제 기준 정말 잘 정리해 놓은 영상인거 같습니다 꼭 보시길 추천 드립니다 🙌🏻

 

문제나 이상한 점이 있다면 언제든 댓글 부탁드려요🦑