들어가기에 앞서,,
Medium에 메일 알람 설정을 해놓았는데 어느날 MVI 패턴 관련 레퍼런스가 업로드 된 것을 확인 할 수 있었습니다 (레퍼런스 찾으면서 읽기 귀찮을 때 설정하면 좋은것같아요 🤓)
예제코드는 예제코드 포스트 바로가기 를 참고해주시면 될 것 같습니다!
게시글로 이동
MVI 패턴은 예전 디자인 패턴아닌가?하고 궁금증에 게시글을 들어가봤습니다.
읽다보니 아는 내용이다 싶다가... Compose와 연관되서 설명하는 부분에서 눈길을 끌게 되었습니다
그동안 저는 Compose로 프로젝트를 진행하며 MVVM 패턴을 적용했는데
늘 한가지 찝찝한 구석이 있었습니다.
"Compose는 Activity, Fragment 개념과 아예 다른데 어떻게 ViewModel이 생명주기를 따라가지??"
사실 생각만하고 프로젝트 릴리즈 일정때문에 해당 고민에 대한 생각은 저멀리 보관하고 있었습니다 😂😂😂
해당 글을 읽고 좀 더 호기심이 생겨서 MVI 패턴 관련 레퍼런스를 찾아보고 Compose에 적용한 예제 코드도 공부해봤습니다
(제일 도움되었던 레퍼런스 - 이동하기)
MVI가 뭔데?
배경
MVI는 반응형 접근 방식으로 애플리케이션을 개발하는 것을 목표로합니다
MVC에서 영감을 받은 디자인 패턴이기 때문에 유사한 개념들이 있습니다!
출처 cycle.org
MVC 계층을 살펴보면, Controller가 데이터와 사용자 입력을 중개하고 Model을 직접 업데이트하는 것을 볼 수 있습니다.
또한 각 계층이 독립되어있지 않고 Controller가 중심이며, 데이터 흐름이 양방향으로 흐르는 것을 확인 할 수 있습니다
하지만 MVI는 각 계층이 데이터 전송/수신 이외의 작업을 담당하지 않고 각 계층이 독립적이며 단방향 데이터 흐름을 따릅니다
단순히 생각하면 유사하다고 느낄 수 있지만 서로 지향하는 목표가 다르죠?
MVI 계층 분석
출처 - https://www.scaler.com/topics/android/mvi-architecture-android/
Model
MVI에서 Model은 데이터 뿐만 아니라 애플리케이션의 상태를 보유하고 관리합니다
또한 Model은 불변성을 가지며 이 상태는 오직 Intent 계층을 통해서만 변경됩니다 (ViewModel의 LiveData, StateFlow와 비슷한 개념이라 생각하시면 돼요!)
View
사용자 인터페이스를 나타내며 Model의 상태를 기반으로 UI를 업데이트 합니다
Intent
❌ Android의 그 Intent 아니에요!! ❌
사용자가 원하는 변경사항을 표현하는 것을 담당합니다.
예를 들면 버튼클릭, 터치 이벤트 등이 있겠죠?
즉, Model에서 설명드렸다 싶이 Intent는 Model의 상태를 변경하는 주체입니다!
MVI를 Compose에 적용해야하는 이유
그 이유는 바로, MVI 패턴의 철학이 Compose와 겹치는 것이 많다! 라는 것입니다.
Compose의 철학과 MVI 패턴의 공통점은 다음과 같습니다.
- 상태 중심의 접근: MVI 패턴은 상태를 중심으로 데이터를 관리하고, UI 상태와 상호작용을 엄격히 분리
- 불변성과 함수형 프로그래밍: MVI 패턴은 상태 변경을 불변성을 유지하면서 처리하고, 함수형 프로그래밍의 원칙을 따름
- 단방향 데이터 흐름: MVI는 단방향 데이터 흐름을 따름
공부하면 공부 할 수록 MVI 패턴은 Compose를 위해 만들어졌다 생각이 들정도로 겹치는게 많다고 느껴졌습니다
MVVM과 MVI 차이점
MVI패턴은 MVVM과 다르게 Model 계층에서 데이터를 보유 할 뿐만아니라 앱의 상태도 보관합니다.
예시를 들면 MVVM에서 뷰모델이 LiveData, StateFlow를 활용해 상태를 감지했다면 MVI는 Model이 데이터뿐만아니라 상태도 관리하기 때문에 뷰모델의 역할도 같이한다고 생각하면 될 것 같습니다!
즉, ViewModel이 상태를 관리하지 않기 때문에 Compose의 생명주기를 따르는 것에 대한 우려가 해소된다는 것을 알 수 있습니다!
하지만, MVI패턴을 적용한 Compose에서 ViewModel을 사용을 안하는 것은 아닙니다
뷰모델을 사용하긴 하지만, 중간에서 중재 개념으로 활용됩니다!
이에 대한 내용은 추후 예제코드를 보시면 이해가 수월해집니다
마치며
MVI 패턴을 공부하며 느낀점은 앞으로 Compose로 진행하는 프로젝트는
더 이상 MVVM을 사용하지는 않을 것 같고 그동안 묵혀두었던 찝찝한 생각이 해결되어 좋았습니다...ㅎㅎ
추가적으로 제가 실제 코드에 적용하면서 느낀점은
React의 리덕스와 굉장히 비슷하다는 느낌을 받았습니다!
아마 React에서 리덕스를 다뤄본 경험이 있다면 러닝커브는 그렇게 크지 않다고 생각합니다 😁
다음 게시글은 실제 코드에 적용한 예시를 들고 작성해보겠습니다!
(진행하고 있는 프로젝트 리팩토링해야겠지....?)
