MVI란 무엇인가?

Model, View, Intent의 앞 글자를 따서 만든 아키텍처 패턴을 일컫는 용어입니다. 관심사 분리를 위해 3개의 키워드로 나눠지며, GUI 프로그래밍에서 주로 언급되는 패턴입니다.

• Model : UI의 상태 (State)
• View : UI(View, Compose 등)
• Intent : 의도(사용자의 액션 또는 이벤트)
  • 안드로이드의 Intent가 아닙니다.

MVI는 순수함수

• MVI의 가장 큰 특징은 순수 함수 Cycle 형식을 갖습니다.
• 외부에서 들어온 사용자의 의도(Intent)대로 모델을 변경하고, Intent에 따라서 새로운 모델로 View에 렌더링 합니다.

단방향 데이터 흐름 UDF

• User → Intent → Model → View → User …

State Reducer

Reducer = (State, Event) → State State Reducer는 새로운 상태를 만드는 로직의 집합입니다. 즉, 기존의 상태를 새로운 상태로 변환하고, 상태를 한 곳에서 관리합니다.

• MVI에서 상태는 불변해야 합니다.
• 새로운 이벤트는 기존 상태와 새로운 상태를 만듭니다.
• 상태 관리를 한곳에서 할 수 있습니다.

MVI 예제코드

sealed class Event {
		object Increment : Evnent()
		object Decrement : Evnent()
}

data class State(val counter: Int = 0)

class ViewModel {
		val state = MutableStateFlow(State())
		
		// Intent를 호출하는 트리거 
		fun handleEvent(event: Event) {
				when (event) {
						is Increment -> state.update { it.copy(counter = it.counter + 1) }
						is Decrement -> state.update { it.copy(counter = it.counter - 1) }
				}
		}
}

• Intent : sealed class Event
• Model : data class State