[Android, Kotlin] Android MVVM 다뤄보기

이번에 필자가 공부해본 것은 MVVM이다.

MVVM은 View - Model - ViewModel의 약자인건 다 알고 있는 사실이니 그냥 넘기고(?)

필자는 오래전부터 사용해왔던 안드로이드 아키텍처이지만

쓰는 이유와 각 파일들이 정확히 무엇을 위한 파일들인지 잘 알지 못했기에

이번 기회에 제데로 알아보고자 한다.

---

1. MVVM의 구조

MVVM은 이름에서도 알 수 있듯이 View, Model, ViewModel로 이루어져 있다.

 

 

• View: 이벤트 발생, liveData 감지해 뷰에 출력한다(출력싸개).
• Model: 실직적인 데이터를 다루는 곳(DB, Api 등의 데이터를 정의(?)한다.)
• ViewModel: 프로젝트의 비즈니스 로직을 관리한다(Api 호출, DB호출 이런거).

주의할 점은 View와 Model의 의존성이 없어야 한다.

 

 

그럼 궁금할 것이다

왜 MVVM을 써야 하는가? 쓰면 파일도 많이 만들어야 하고 존나귀찮아질것 같은데...

 

왜냐면(이해를 위해 MVC와 MVP 아키텍처를 예로 들어보겠다)

• MVC는 초보자를 위한 쉬운 파일 구조이지만 코드를 모두 activity에 꽂아 넣기(?) 때문에 앱이 무거워질 수 있다(MVVM은 activity에 모든 코드를 넣는 방식이 아닌 역할별로 파일 구조를 분리해놨다).
• MVP는 View와 Model이 Presenter를 통해서만 동작하게 하는 디자인 패턴이지만 프로젝트가 커지면 View와 Model이 Presenter와의 의존성이 커진다는 단점이 있다(의존성이 커지게 되면 앱을 유지보수 하기가 매우 껄끄러워진다.).
  MVVM은 View와 Presenter가 1:1의 관계를 가지는게 아닌, 하나의 ViewModel을 여러 activity가 사용할 수 있다는 장점이 있다(1:多 관계).

 

이제 MVVM을 사용해야 하는 이유도 알았으니 간단하게 깃허브 open api 예제를 통해 공부해보도록 하자.

 

파일 구조

 

1. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".view.MainActivity"
    android:orientation="vertical">

    <ImageView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:src="@drawable/github_icon"
        android:layout_gravity="center"/>

    <EditText
        android:id="@+id/github_user_name"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_marginTop="15dp"
        android:layout_marginStart="35dp"
        android:layout_marginEnd="35dp"
        android:hint="github username" />

    <Button
        android:id="@+id/result_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="find"
        android:backgroundTint="@color/black"
        android:layout_marginEnd="55dp"
        android:layout_marginStart="55dp"
        android:layout_marginTop="40dp"/>
</LinearLayout>

 

2. activity_user_info.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".view.UserInfoActivity">

    <ImageView
        android:id="@+id/profile_img"
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="40dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="@+id/profile_img"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/profile_img"
        app:layout_constraintTop_toTopOf="@+id/profile_img">

        <TextView
            android:id="@+id/user_name_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="name(subname)"
            android:textSize="23sp"
            android:textStyle="bold"
            android:textColor="@color/black"/>

        <TextView
            android:id="@+id/follow_info"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="follower: 47, following: 49"
            android:textSize="17sp"
            android:autoSizeTextType="uniform"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="@+id/profile_img"
        app:layout_constraintTop_toBottomOf="@+id/profile_img">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/company_icon" />

            <TextView
                android:id="@+id/company_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginStart="15dp"
                android:text="company"
                android:textSize="17sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/baseline_location_on_24" />

            <TextView
                android:id="@+id/location_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginStart="15dp"
                android:text="location"
                android:textSize="17sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/link_icon" />

            <TextView
                android:id="@+id/link_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginStart="15dp"
                android:text="link"
                android:textSize="17sp" />
        </LinearLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

1. models

GithubUser.kt

import com.google.gson.annotations.SerializedName

data class GithubUser(
    @SerializedName("login") val username: String,
    @SerializedName("name") val name: String,
    @SerializedName("avatar_url") val avatarUrl: String,
    @SerializedName("company") val company: String,
    @SerializedName("blog") val blog: String,
    @SerializedName("location") val location: String,
    @SerializedName("followers") val followers: Int,
    @SerializedName("following") val following: Int
)

 

GithubService.kt

import retrofit2.Call
import retrofit2.http.GET
import retrofit2.http.Path

interface GithubService {
    @GET("users/{owner}")
    fun getUser(
        @Path("owner") owner: String
    ): Call<GithubUser>
}

 

GithubObject.kt

import com.google.gson.GsonBuilder
import okhttp3.OkHttpClient
import okhttp3.logging.HttpLoggingInterceptor
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory

object GithubObject {
    private val gson = GsonBuilder()
        .setLenient()
        .create()

    private val okHttp = OkHttpClient.Builder()
        .addInterceptor(HttpLoggingInterceptor())
        .build()

    private val retrofit = Retrofit.Builder()
        .baseUrl("https://api.github.com/")
        .client(okHttp)
        .addConverterFactory(GsonConverterFactory.create(gson))
        .build()

    val githubService: GithubService = retrofit.create(GithubService::class.java)
}

model 계층에서 필자는 불러올 데이터들, api service, api builder를 만들었다.

 

 

2. ViewModel

import android.util.Log
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import com.example.day2.model.GithubObject
import com.example.day2.model.GithubUser
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response

class GithubViewModel: ViewModel() {
    private val _getGithub = MutableLiveData<GithubUser>()
    val getGithub: LiveData<GithubUser> = _getGithub

    fun getGithubUser(userName: String) {
        GithubObject.githubService.getUser(userName).enqueue(object : Callback<GithubUser> {
            override fun onResponse(call: Call<GithubUser>, response: Response<GithubUser>) {
                if (response.isSuccessful) {    // 400에러가 안뜸
                    _getGithub.value = response.body()
                } else Log.d("TAG", "onResponse error: $response")
            }

            override fun onFailure(call: Call<GithubUser>, t: Throwable) {
                Log.d("TAG", "onFailure response fail: $call")
                Log.e("TAG", "onFailure response fail: ${t.printStackTrace()}", t.cause)
            }
        })
    }
}

viewmodel 계층에서는 retrofit 호출을 로직을 생성했다.

 

 

3. View

MainActivity.kt

import android.content.Intent
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.example.day2.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.resultBtn.setOnClickListener {
            startActivity(Intent(this, UserInfoActivity::class.java)
                .putExtra("name", binding.githubUserName.text.toString()))
        }
    }
}

 

UserInfoActivity.kt

import android.os.Bundle
import androidx.activity.viewModels
import androidx.appcompat.app.AppCompatActivity
import coil.load
import coil.transform.CircleCropTransformation
import com.example.day2.databinding.ActivityUserInfoBinding
import com.example.day2.viewmodel.GithubViewModel

class UserInfoActivity : AppCompatActivity() {
    private val viewModel by viewModels<GithubViewModel>()
    private lateinit var binding: ActivityUserInfoBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityUserInfoBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val name = intent.getStringExtra("name")

        if (name != null) {
            viewModel.getGithubUser(name)
            viewModel.getGithub.observe(this) { data ->
                binding.profileImg.load(data.avatarUrl) {
                    transformations(CircleCropTransformation())
                }
                binding.userNameText.text = "${data.username}(${data.name})"
                binding.followInfo.text = "followers: ${data.followers}, following: ${data.following}"
                binding.companyText.text = data.company
                binding.locationText.text = data.location
                binding.linkText.text = data.blog

            }
        }
    }
}

view 계층에서는 viewmodel에서 생성한 로직을 이용해 뷰를 화면에 출력했다.

---

정리

이번에 MVVM을 다시 공부해 보면서 각각의 계층들의 역할을 더 정확하게 알게 되었다.