MVI - Model, View, Intent 입문하기

이제 컴포즈의 흐름을 피해갈 수 없다. 제대로 입문하기 위해 MVI 패턴먼저 공부하고, 시작하려고 한다.

# MVI?

MVI는 Model-View-Intent로, 

Model은 UI의 상태, View는 UI, Intent는 사용자와의 상호작용이나 다른 요소에 의한 이벤트(의도)를 의미한다.

나는 처음에 Intent가 안드로이드의 Intent인줄알고 이걸로 어떻게 패턴을 구성했지 라고 생각했었다. 근데 ViewModel과 ACC ViewModel이 다르듯이 여기서 말하는 Intent도 완전히 다른 개념이다.

MVI의 가장 큰 특징은 함수의 입력만이 함수의 결과에 영향을 주는 순수함수 싸이클로 이루어져있다는 것이다. 자연스럽게 단방향 데이터 흐름으로 이루어진다.

상태가 그러면 model이 되겠다. intent함수의 결과가 model 함수의 인수로 전달되고, 모델의 결과가 뷰로 전달된다.

외부의 영향으로 상태가 바뀌지않고 새 이벤트가 기존 상태와 더불어 새 상태를 만든다.

그래서 상태 변화를 관리해주는 어떤 지점이 필요한데, `State Reducer Pattern`으로 이 과정을 처리한다. 이게 React에서 Redux랑 비슷하다. reducer, transformer, 다양한 이름으로 불린다.

 

순수함수라고 하면 따라오는 개념 중에 Side Effect가 있다. 함수 외부의 요소나 상태를 바꾸는 건데, Intent와 Model 사이에서 발생하는 것이라고 보면된다. 뷰에는 영향을 끼치지않지만, Model에는 영향을 끼칠 수 있다.

네비게이션, 로깅, 토스트(스낵바), analytics같은 일회성 이벤트들은 Side Effect로 처리해야되는 부분이다. 즉 UI업데이트가 필수가 아닌 것들이라고 이해하면 된다. Jetpack Compose 자체에도 SideEffect로 분류되는 것들이 있기때문에 이거도 한번 살펴봐야된다.

# 가볍게 실습

국룰인 카운터 앱으로 한번 알아보자.

 

먼저 UI가 표시할 데이터를 정의하겠다.

data class CounterState(
    val count: Int = 0
)

요 상태만 갖고 이제 ui에서 처리할 것이다. 이 상태는 카운트 값을 관리한다.

이제 Intent에 해당하는 액션(의도)을 정의하면 아래와 같다. 값을 증가시키는 액션, 감소시키는 액션으로 나눈다.

sealed class CounterIntent {
    object Increment : CounterIntent()
    object Decrement : CounterIntent()
}

이제 뷰모델에서 액션을 받아서 처리해야된다.

class CounterViewModel : ViewModel() {
    private val _state = MutableStateFlow(CounterState())
    val state: StateFlow<CounterState> = _state.asStateFlow()

    fun processIntent(intent: CounterIntent) {
        when (intent) {
            is CounterIntent.Increment -> {
                _state.update { currentState ->
                    currentState.copy(count = currentState.count + 1)
                }
            }
            is CounterIntent.Decrement -> {
                _state.update { currentState ->
                    currentState.copy(count = currentState.count - 1)
                }
            }
        }
    }
}

상태값으로 계속 flow를 구독하고 있고, 액션이 들어오면 CounterState의 count값만 update해준다.  

의도에 맞게 상태 업데이트를 수행하는 게 이 패턴의 핵심이다.

update가 생소해서, 자세히 살펴봤다.

public inline fun <T> MutableStateFlow<T>.update(function: (T) -> T)

현재 상태를 인자로 받고, 새로운 상태를 반환하는 함수로, MVI의 목적인 상태의 불변성을 유지한채로 상태갱신을 해준다고 보면 될 것 같다. 이 update 과정에서 현재 상태를 받아, 그 상태 안에 있는 값을 dataclass의 유용한 메서드인 copy로 수정해서 새 상태를 반환해준다.

Row {
    Button(onClick = { viewModel.processIntent(CounterIntent.Decrement) }) {
        Text(text = "-")
    }
    Spacer(modifier = Modifier.width(16.dp))
    Button(onClick = { viewModel.processIntent(CounterIntent.Increment) }) {
        Text(text = "+")
    }
}

UI는 그냥 별거없다. ui로 액션을 전달한다. 근데 구현 상태를 보면, 처리 순서는 따로 고려하고 있지 않다.

그래서 flow도 쓰고있으니, channel을 사용해서 관리를 해보자. Channel은 생산자-소비자 패턴을 따르며, 이벤트가 들어오면 큐에 쌓이고 순차적으로 소비된다.

기존에 processIntent에서 바로 처리하던걸 channel로 보내서 순서를 맞춰줬다.

class CounterViewModel : ViewModel() {
    private val events = Channel<CounterIntent>(Channel.UNLIMITED)
    val state = MutableStateFlow(CounterState()) // 외부에서 상태를 구독 가능

    init {
        events.receiveAsFlow()
            .onEach { intent ->
                updateState(intent)  // handleIntent 대신 updateState로 변경
            }
            .launchIn(viewModelScope) // viewModelScope에서 실행
    }

    // 이벤트 처리 함수 (외부에서 호출 가능)
    fun handleEvent(intent: CounterIntent) {
        events.trySend(intent) // Channel에 이벤트를 전송
    }

    // 상태 업데이트 함수 (내부적으로만 사용)
    private fun updateState(intent: CounterIntent) {
        when (intent) {
            is CounterIntent.Increment -> {
                state.update { currentState ->
                    currentState.copy(count = currentState.count + 1)
                }
            }
            is CounterIntent.Decrement -> {
                state.update { currentState ->
                    currentState.copy(count = currentState.count - 1)
                }
            }
        }
    }
}

events.receiveAsFlow()는 Channel에서 이벤트를 Flow로 변환하여 채널에서 발생한 이벤트들이 순차적으로 흐름에 의해 처리해 사용할 수 있게 해준다. events.trySend(intent)는 Channel에 이벤트를 비동기적으로 전달한다.

public fun trySend(element: E): ChannelResult<Unit>

이벤트가 채널로 도착하지 않아도 예외를 발생시키지않는 safe한 메서드다.

# 아직 안끝남 - 외부 상태 변경문제

문제가 하나 있다. state가 MutableStateFlow라서 외부에서 바로 접근 가능하다는 점이다.

// 상태를 저장하는 Flow, runningFold로 이벤트에 따라 상태를 누적해서 갱신
val state: StateFlow<CounterState> = events.receiveAsFlow()
    .runningFold(CounterState(), ::reduceState)  // 누적하여 상태를 갱신
    .stateIn(viewModelScope, SharingStarted.Eagerly, CounterState())  // 상태를 StateFlow로 변환하여 구독 가능하게 함
    
// 기존에 있던 processIntent대신 reduce로 바꾼다
// 상태 갱신을 처리하는 리듀서 함수
private fun reduceState(currentState: CounterState, intent: CounterIntent): CounterState {
    return when (intent) {
        is CounterIntent.Increment -> currentState.copy(count = currentState.count + 1)
        is CounterIntent.Decrement -> currentState.copy(count = currentState.count - 1)
    }
}

kotlin에서 제공하는 state reducer가 runningFold인데, 주어진 이벤트와 상태를 통해서 새로운 상태를 만들어낸다.

runningFold는 Flow의 연산 함수 중 하나로, 누적된 값을 계산하면서 현재 값과 새로운 값을 결합해 나간다.  reduce는 결과를 단일 값으로 반환하는 반면, runningFold는 매번 새로운 값을 발행하면서 중간 상태를 모두 반환한다.

누적함수로 reduceState가 쓰인것이다.

public fun <T, R> Flow<T>.runningFold(initial: R, @BuilderInference operation: suspend (accumulator: R, value: T) -> R): Flow<R> = flow {
    var accumulator: R = initial
    emit(accumulator)
    collect { value ->
        accumulator = operation(accumulator, value)
        emit(accumulator)
    }
}

초기 상태와 이벤트 변경되는 이벤트를 받아서 처리하는 걸 볼 수 있다.

 

전체적인 흐름을 다시 짚자면, 

1. 이벤트가 채널에 들어오면
2. reduceState를 호출해서 새로운 상태를 발행한다(이때 runningFold에서 상태를 받아 그걸 reduceState호출할 때 넣는다.)
3. 그러면 state를 구독하고있던 UI 단에서 업데이트가 이루어지게 된다.

 

MVI... 어렵다.

---

::출처::

https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.linkedin.com%2Fpulse%2Funderstanding-react-reducer-javascript-state-ashim-rudra-paul&psig=AOvVaw1xQbV3yGK01ytdnGAqKU2b&ust=1729415101030000&source=images&cd=vfe&opi=89978449&ved=0CBMQjRxqFwoTCJCHt7iLmokDFQAAAAAdAAAAABAE

https://jaehochoe.medium.com/%EB%B2%88%EC%97%AD-%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C%EB%A5%BC-%EC%9C%84%ED%95%9C-mvi-model-view-intent-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-165bda9dfbe7

도움이 됐다면 댓글이나 공감 버튼 한 번씩 누르고 가주세요!