[Android] MVI 패턴은 무엇일까?

 

요즘은 compose를 많이 사용하는 추세이다. 필자도 compose를 많이 사용하고 있다.

필자가 지인들에게 compose와 mvi를 사용하면 좋다는 소식을 듣고 바로 mvi 공부를 시작했다.

지금 바로 mvi에 대해 알아보자.

 

1. mvi란?

mvi 아키텍처는 mvc, mvp, mvvm와 같은 안드로이드 개발자들의 개발과 유지 보수를 편리하게 해주는 아키텍처 패턴의 일종이라 할 수 있다.

mvi의 구조는 model - view - intent로 구성되며 각 layer는 서로 완전히 관심사가 분리되어 있다.

sideEffects는 시간이 오래 걸리는 작업(api 통신, 백그라운드 스레드에서 처리할 로직)과 인스턴스 뷰(screen 간 이동, toast와 dialog)등을 처리한다.

sideEffects가 있으면 사용자의 필요에 따라 sideEffects의 로직이 수행될 것이다.

출처: https://sungbin.land/%EC%95%84%EC%A7%81%EB%8F%84-mvvm-%EC%9D%B4%EC%A0%A0-mvi-%EC%8B%9C%EB%8C%80-319990c7d60

 

2. mvi를 사용하는 이유?

이게 사실 본론이다 "이 패턴을 왜 사용해야 하는가?"이다.

mvi를 왜 사용해야 하냐면

우리가 만드는 안드로이드 앱은 사실 state(상태)의 집합이다.

안드로이드 앱에서는 다양한 이벤트를 발생시켜 state를 생성해 낸다.

예를 들어 button을 클릭한다 또는 api 호출 후 성공/실패 와 같은 경우가 있다.

안드로이드 개발자들은 모두 이 state들을 관리하면서 앱을 만들어야 한다.

 

만약 state의 관리가 제대로 이루어지지 않는다면 다음과 같은 문제가 발생할 수 있다.

 

위의 사진은 api 통신으로 국가의 정보와 image가 정상적으로 출력되었는데(success 상태)

로딩 indicator가 사라지지 않고 있다.(loading 상태)

 

우리들은 위와 같은 문제들을 사전에 막으면서, 수많은 상태들을 효율적으로 관리하기 위해 mvi를 사용해야 한다!

 

3. mvi 사용법(?)

mvi가 왜 필요한지 알았으면 이제는 사용법(?)을 익혀보자.

 

1. model

model에서 screen에 사용할 state들을 생성한다.

예를 들어 success 상태, fail 상태, loading 상태, 데이터 정보(api 정보 등등..)를 추가할 수 있다.

data class MainState(
    val onLoading: Boolean = false,
    val onComplete: Boolean = false,
    val onFail: Boolean = false,
    val apiData: ApiData? = null
)

예제를 보면 loading, complete, fail 상태의 state와 api data가 추가된 것을 볼 수 있다.

 

2. intent

intent에서는 state에 따른 event들을 정의한다.

intent를 구현하는 것은 sealed class를 사용하는 것을 권장한다고 한다.

개발자는 자신이 생성한 state에 따른 event를 생성해서 호출시킬 수 있다.

sealed class MainIntent {
    data class apiData(apiData: ApiData): MainIntent()
    object OnError: MainIntent()
}

위의 예제에서는 api가 호출되었을 때의 이벤트와

error의 이벤트를 생성하였다.

intent는 한 화면에서 일어나는 state event를 관리할 수 있다.

 

3. sideEffects

sideEffects에서는 위에서도 언급했다시피, intent에서 하기에는 어려운 작업들(api 로직, 백그라운드 스레드에서 할 작업, 인스턴스 뷰 등)을 정의한다.

sealed class MainSideEffects {
    data class ApiRequest(requestBoody: RequestBody): MainSideEffects()
}

 

4. view

view는 intent에서 생성한 state(상태)에 따른 event를 이용해 화면을 구성하는 역할을 한다.

compose의 경우에는 아직 잘 모르겠지만 xml의 경우에는 databinding이 사용된다고 알고 있다.

 

간단 정리

• mvi는 안드로이드 앱의 state(상태) 관리에 유용하게 사용할 수 있는 아키텍처 패턴이다.
• mvi를 배우기 위해 알아야 할 사전 지식이 많을 것 같다.
• 또한 한 화면의 모든 상태를 생성하여야 하기에 간단한 state 변화도 모두 코드로 적어 주어야 한다.

 

정리

• mvi에 대해 공부해 보았는데 아직 부족한 점이 많았다.
• mvi는 단점도 있지만 state 관리가 중요한 compose와 같이 사용하면 최고의 시너지가 날 것 같다.
• 이제 직접 실전에서 사용하면서 공부한 내용을 적용하고 싶어졌다.
• 다른 mv 시리즈와는 다르게 명확한 장점이 있는 아키텍처 패턴 같았다(기분 탓일 수도 있다.)

 

제 소스 코드는 아래의 최재호 강사님의 강의를 사용해 제 입맛대로(?) 조금씩 바꾸었습니다. 오류가 있을 수도 있으니 양해 바랍니다. 자세한 내용은 강사님의 강의를 참고해 보시면 도움이 될 것 같습니다 :0

 

참고

https://youtu.be/_ePUpzECd8c

https://sungbin.land/%EC%95%84%EC%A7%81%EB%8F%84-mvvm-%EC%9D%B4%EC%A0%A0-mvi-%EC%8B%9C%EB%8C%80-319990c7d60

아직도 MVVM? 이젠 MVI 시대!