2024.01.11(목) TIL

quinones·2024년 1월 11일

기본적인 MVVM패턴 적용해보기!
mvvm
MVVM

먼저 원래 Activity에서 작성했던 코드는

private fun getMessageValidName(): String = getString(
    if (etName.text.toString().isBlank()) {
        SignUpErrorMessage.NAME
    } else {
        SignUpErrorMessage.PASS
    }.message
)

SignUpErrorMessage는 enum클래스로 오류 메세지들을 뫃아놓은 클래스이다.
이름을 작성하는 editText이 있는데, 만약 해당 칸이 비어있다면 "이름을 입력해주세요"라는 string값을 가져오고, 아니라면 "" 공백을 가져와주는 함수이다.

위는 기존 방법이다. 이제부터 MVVM패턴으로 바꾸는 방법이다.

먼저 activity에서 view모델을 초기화시켜줘야한다.

private val viewModel by lazy {
    ViewModelProvider(this)[SignUpViewModel::class.java]
}

적용시킬 함수를 viewModel로 보내기 위해서는 먼저 해당 Activity에 대한 ViewModel을 만들어줘야한다.
SignUpAcitivty에 대한 SignUpViewModel을 만들어주고 ViewModel()을 상속받아주고, 해당 뷰모델 안에서

private val _nameErrorMessage: MutableLiveData<SignUpErrorMessage> = MutableLiveData()
val nameErrorMessage: LiveData<SignUpErrorMessage> get() = _nameErrorMessage

이렇게 변수 두개를 만들어주고 MutableLiveData로 선언해준다. <>안에는 타입을 지정해준다. 나는 SignUpErrorMessage 클래스 안에있는String값들을 기준으로 가져올 예정이기 때문에 이렇게 지정해줬다.
_nameErrorMessage는 뷰모델 내부에서 read와 write를 처리할 수 있는변수이고, nameErrorMessage는 view에서 read만 할수있는 변수이다.

그 뒤에 함수를 만들어주는데

fun checkValidName(text: String) {
   _nameErrorMessage.value = if (text.isBlank()) {
       SignUpErrorMessage.NAME
   } else {
       SignUpErrorMessage.PASS
   }
}

원래 작성했던 코드에서 기능을 담당하는 부분들을 그대로 viewModel로 가져와서 사용해줬다. 이 값을 view에서 사용하는 방법은

nameErrorMessage.observe(this@SignUpActivity) {
      tvNameError.text = getString(it.message)
}

view에서 read할수있는 nameErrorMessage를 사용해준다. 옵저빙을 통해서 변화하는 값을 실시간으로 관찰해주고, 그 값에 따라서 텍스트를 설정해준다.

이렇게 원래는 view에서 모든 기능을 처리했는데, 기능적인 부분은viewModel에서, ui에 보여주는건view로 나누어서 처리해서 유지보수성을 높여줄 수 있다.

profile
이우진

0개의 댓글