[Kotlin][Android] 안드로이드 MVVM 패턴에 대해서 - Retrofit으로 전송받은 값을 MVVM구조 적용하여 구현하기

안녕하세요 👋

오늘은 MVVM 패턴에 대해서 공부한 내용을

포스팅해보려 합니다.

MVVM 패턴이란?

MVVM 패턴은 Model, View, ViewModel을 분리해 View와 Model 간의

의존성을 줄여주는 패턴을 의미합니다.

MVVM패턴의 구조

View

이벤트를 발생시켜 데이터를 요청

 

⬇️

ViewModel

View에서 요청한 데이터를 불러오는 함수 등을 호출

 

⬇️

Model

ViewModel에서 요청하는 값을 반환

 

⬇️

ViewModel

모델에서 반환받은 값을 LiveData로 감싸줌

 

⬇️

View

라이브데이터를 감지하여 출력

 

---

그렇다면..

왜 MVVM패턴을 사용할까요?

기존에 사용하던 패턴으론 MVC , MVP 패턴이 존재합니다.

MVC의 경우 View와 Controller를 액티비티에서 모두 처리해야 하기에 View와 Model사이에 의존성이 높고 ,

 

MVP의 경우는 Presenter가 View와 1대 1로 동작하기 때문에 둘 사이의 의존성이 강해지는 문제가 발생하고 프로젝트의 볼륨이

커질 경우 프로젝트의 로직이 너무 거대해져서 유지보수가 힘들다는 문제가 있었습니다.

 

MVVM은 ViewModel 1개와 여러 View가 동작 가능하기에 상대적으로 프로젝트의 볼륨이 커져도 유지보수가 

쉽고 , ViewModel을 통해 View와 Model의 의존성 문제를 해결할 수 있습니다.

---

그렇다면 본격적으로 MVVM 패턴으로 프로젝트를 구성하는 방법을 알아보겠습니다. 🤔

우선 구성은 크게 Model , ViewModel , ViewModelFactory , Repository를 생성해주어야 합니다.

 

코드는 아래와 같습니다.

 

Model

data class MovieInfo(val name: String, val imageUrl: String, val category: String)

 

Repository

class MovieRepository(private val retrofitService : RetrofitRestInterface) {
    suspend fun getAllMovies() = retrofitService.getAllMovies()
}

 

ViewModelFactory

class MovieViewModelFactory(private val repository: MovieRepository) : ViewModelProvider.Factory {
    override fun <T : ViewModel> create(modelClass: Class<T>): T {
        return if(modelClass.isAssignableFrom(MovieViewModel::class.java)){
            MovieViewModel(repository) as T
        } else {
            throw java.lang.IllegalArgumentException("해당 ViewModel을 찾을수가 없습니다!")
        }
    }
}

 

ViewModel

class MovieViewModel(private val movieRepository: MovieRepository) : ViewModel() {
    val movieList = MutableLiveData<List<MovieInfo>>()
    val errorMessage  = MutableLiveData<String>()

    val isLoading = MutableLiveData<Boolean>()
    private var job : Job? = null

    private val exceptionHandler = CoroutineExceptionHandler{_ , thrownException ->
        thrownException.localizedMessage?.let { onError(it) }
    }

    fun getAllMoviesFromViewModel() { // 전체 영화 정보 불러오기
        job = CoroutineScope(Dispatchers.IO).launch(exceptionHandler) {
            isLoading.postValue(true)
            val response = movieRepository.getAllMovies()
            withContext(Dispatchers.Main){
                if(response.isSuccessful){
                    movieList.postValue(response.body())
                    isLoading.postValue(false)
                } else {
                    onError("에러내용 : ${response.message()}")
                }
            }
        }
    }

    private fun onError(message : String) {
        errorMessage.value = message
        isLoading.value = false
    }

    override fun onCleared() { //라이프싸이클에 따라 해당 ViewModel이 사라질때 호출됨
        super.onCleared()
        job?.cancel()
    }
}

Repository를 통해 ViewModel에서 Model의 값을 불러오고

ViewModelFactory를 통해 ViewModel을 생성합니다.

 

MainActivity와 Rest통신 , RecyclerView를 구성하는 코드는 아래와 같습니다.

interface RetrofitRestInterface {
    @GET(MOVIE_LIST_URL) // 영화정보 json을 받는 URL 
    suspend fun getAllMovies() : Response<List<MovieInfo>>
}

class RetrofitService {
    companion object{
        private lateinit var retrofitService : RetrofitRestInterface
        fun getInstance() : RetrofitRestInterface {
            if(!::retrofitService.isInitialized){
                val retrofit = Retrofit.Builder()
                    .baseUrl(TARGET_URL) 
                    .addConverterFactory(GsonConverterFactory.create())
                    .build()
                retrofitService = retrofit.create(RetrofitRestInterface::class.java)
            }
            return retrofitService
        }
    }
}

 

RecyclerViewAdapter

class MovieRecyclerAdapter : RecyclerView.Adapter<MovieRecyclerAdapter.MovieViewHolder>() {
    private var movies = listOf<MovieInfo>()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MovieViewHolder {
        val binding = MovieAdapterLayoutBinding.inflate(LayoutInflater.from(parent.context) , parent , false)
        return MovieViewHolder(binding)
    }

    override fun onBindViewHolder(holder: MovieViewHolder, position: Int) {
        holder.bind(movies[position])
    }

    override fun getItemCount() = movies.size

    fun setList(list : List<MovieInfo>){
        movies = list
    }

    inner class MovieViewHolder(private val binding: MovieAdapterLayoutBinding) : RecyclerView.ViewHolder(binding.root){
        fun bind(movie : MovieInfo){
        // Glide를 통해 이미지 Load
            Glide.with(binding.imageview.context).load("$TARGET_URL${movie.imageUrl}").into(binding.imageview)
            binding.name.text = movie.name
        }
    }
}

 

MainActivity

class MovieMainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private lateinit var mMovieRecyclerAdapter : MovieRecyclerAdapter
    private var mMovieViewModel : MovieViewModel? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater).also {
            setContentView(it.root)
        }
        mMovieRecyclerAdapter = MovieRecyclerAdapter()
        mMovieViewModel = ViewModelProvider(this ,
            MovieViewModelFactory(MovieRepository(RetrofitService.getInstance())))[MovieViewModel::class.java]
        observeData()
    }

    override fun onResume() {
        super.onResume()
        mMovieViewModel?.getAllMoviesFromViewModel() // 영화 전체정보를 ViewModel에서 불러온다.
    }

    /**
     * Function for observe Live Data
     * **/
    private fun observeData() { // LiveData의 값을 observe하는 함수
        mMovieViewModel?.movieList?.observe(this){
            Toast.makeText(this , "뷰모델 옵저버 호출됨!!" , Toast.LENGTH_SHORT).show()
            with(binding.movieRV) {
                mMovieRecyclerAdapter.setList(it)
                adapter = mMovieRecyclerAdapter
                mMovieRecyclerAdapter.notifyItemRangeChanged(0, mMovieRecyclerAdapter.itemCount)
            }
            binding.progressBar.visibility = View.GONE
        }
        mMovieViewModel?.errorMessage?.observe(this){
            binding.progressBar.visibility = View.GONE
            Toast.makeText(this@MovieMainActivity , it , Toast.LENGTH_SHORT).show()
        }
        mMovieViewModel?.isLoading?.observe(this , Observer {
            if(it){
                binding.progressBar.visibility = View.VISIBLE
            } else {
                binding.progressBar.visibility = View.GONE
            }
        })
    }
}

 

프로젝트는 위와 같이 구성을 하면 되며

새로운 Model이 추가될 시에는 Repository에 추가된 Model의 값을 불러올 수 있는 함수를 추가로 구현해주면 됩니다.

MVVM의 동작 방식은 위 예제와 같이 observer를 활용 하여 LiveData의 변경을 감지하고

그 변경된 사항을 View에 나타내는 구조로 이루어집니다.

 

동작 화면은 아래와 같습니다. 😎

 

실행화면

이상으로 MVVM 포스팅에 대해 마치겠습니다.

 

오늘도 즐코하세요 :)