ViewModel을 이용한 버튼 활성화 방법

이 글은 공부한 내용을 정리하는 글로 건전한 비판은 언제든 환영합니다.

 

ViewModel이란?

간단히 말하면 ViewModel이란 view의 UI상태를 담당하기 위해 만들어진 클래스이다.

 

자세한 내용은 MVVM패턴에 대해서 설명한 내용이 있으니 참고하시면 좋겠습니다/

https://luca-os.tistory.com/m/61

 

 

 

그래서 어떻게 ViewModel을 이용하여 버튼을 활성화 할까?

먼저 스토리 보드는 간단하게 email, password, button 방식으로 구성하였고

프로퍼티 및 액션은

이렇게 작성하였습니다.

 

ViewModel 작성하기

먼저 ViewModel이라는 파일을 작성하여서 TextField와 관련된 프로퍼티를 작성하여 줍니다.

//
//  ViewModel.swift
//  ViewModelBtnActivate
//
//  Created by Mac on 2022/10/18.
//

import UIKit



struct loginViewModel{
    var email:String?
    var password:String?
}

 

그리고 프로토콜을 하나 작성하여 줍니다.

import UIKit

protocol Authentication{
    var formIsValid:Bool {get}
    var buttonBackgroundColor:UIColor {get}
    
}

그리고 위에서 구조체로 만들었던 곳에 상속을 받아주게 되면,

이렇게 에러가 발생하게 됩니다. 그 이유는 상속을 받았기 때문에 구현을 해주어야 합니다.

그래서

struct loginViewModel: Authentication{
    
    var email:String?
    var password:String?
    
    var formIsValid: Bool{
        return email?.isEmpty == false && password?.isEmpty == false
    }
    
    var buttonBackgroundColor: UIColor{
        return formIsValid ? #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1) : #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1).withAlphaComponent(0.5)
    }

    
}

위와 같이 작성하게 된다면, email과 password가 비어있지 않다면 true를 출력할 것이며 formIsValid를 기준으로 buttonBackground color도 바뀌게 됩니다.

그리고 protocol을 하나 더 만들어 주겠습니다.

protocol FormViewModel{
    func update()//추가
}


protocol Authentication{
    var formIsValid:Bool {get}
    var buttonBackgroundColor:UIColor {get}
    
}

 

ViewController

다시 ViewController로 돌아와서 작성해준 viewModel을 프로퍼티로 만들어 줍니다.

class ViewController: UIViewController {

    private var viewModel:loginViewModel()//추가

그리고 extension하여서, 아까 viewModel에서 만든 protocol을 상속 받아줍니다.

그리고 viewModel을 이용하여 버튼에 색상이나 활성화를 바꿔줍니다.

extension ViewController:FormViewModel{
    func update() {
        btnProperty.backgroundColor = viewModel.buttonBackgroundColor
        btnProperty.isEnabled = viewModel.formIsValid
    }
    
    
}

그리고 ViewController에서 action을 하나 만들어 줍니다.

@objc func btnActivate(sender: UITextField){
        if sender == emailTextField{
            viewModel.email = sender.text
        }else{
            viewModel.password = sender.text
        }
        
        update()
    }

UITextField에서 입력을 받으면 viewModel로 들어가게 됩니다.

그래서 viewModel에서 작성한 함수를 가지고 넣을 수 있게 작성합니다.

 

그리고 액션을 받은 것들을 각 TextField에서 받은 addTarget으로 넣어주게 됩니다.

func configureObservable(){
        emailTextField.addTarget(self, action: #selector(btnActivate), for: .editingChanged)
        passwordTextField.addTarget(self, action: #selector(btnActivate), for: .editingChanged)
    }

그리고 이 작성한 함수를 viewDidLoad에 넣어주게 된다면

 override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        configureObservable()
    }

작동할 수 있습니다.

빈칸일때

TextField를 작성하였을 때