[기술 블로그 읽기] robust + MVI + Jetpack Compose

읽은 기술 블로그 원문 + 출처

https://proandroiddev.com/a-robust-mvi-with-jetpack-compose-e08882d2c4ff

A robust MVI with Jetpack Compose

 

---

지극히 개인 스터디를 위한 글

1. Robust ?

글의 서두에 robust architecture 라고 강조된 부분을 보았다. 해당 용어를 그냥 지나치면 안될 것 같다.

 

robust 사전적 뜻도 보고

네이버 영어 사전에서의 robust 뜻

 

 

소프트웨어 관련해서 어떻게 쓰이는지도 살펴보았다.

 

위키피디아에서의 뜻 : Robustness도 확인한다.

위키피디아에서의 Robustness 뜻

 

아예 Software robustness에 관해서 쓴 글도 있었다.

https://nexwebsites.com/blog/software-robustness/

What is Software Robustness? How to Ensure Quality and Reliability - Nexus Software Systems

 

🤔 내가 이해한 robust한 소프트웨어란, 쉽게 말해 에러 처리, 특히 사용자의 입력과 관련한 에러 처리를 잘하는 소프트웨어를 말하는 것  같다. 문제 상황이 발생한 이후에도 사용자가 불편함 없이 서비스를 이용하도록 이슈에 대한 대응을 잘하는 소프트웨어를 말하는 것 같다. robust란 단어를 쓴 이유가 이해가 간다.

 

robust/robustness 라는 용어 하나에 집중해서 스터디해도 될 듯 하다.

 

2. 저자의 권장 사항

글이 본론으로 들어가기 전에 다음과 같이 4 가지를 권장했다.

 

• Recommendation of ViewBinding over DataBinding : DataBinding 보다는 ViewBinding 쓰기
• Transition from XML to Jetpack Compose : XML에서 Jetpack Compose로 변환하기
• Appearance of MVI : MVI 패턴
• Stable release of KMP : 안정적인 버전의 KMP

왜 이런 사항들을 권장하는 지에 대한 상세한 설명은 없지만, 저자는 적은 학습 곡선과 모든 개발자들이 파악할 수 있는 robust 아키텍처를 위한 작업을 하는 사람이라고 하니, 그의 경험치가 담긴 권장 사항들이겠다. 

저자의 의도를 다는 알 수 없지만, 대충 이렇지 않을까 싶은 이유들을 찾아본다.

 

 

1. 이전부터 DataBinding을 권장하지 않는다는 건 알고 있었다.

https://medium.com/@dnjstjr245/%EB%B2%88%EC%97%AD-data-binding%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EB%A7%90%EC%95%84%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-85b91d7e8b6b

(번역) Data Binding을 사용하지 말아야 하는 이유

 

2. Jetpack Compose와 XMl 간 비교. Jetpack Compose의 장점들에 집중해야 겠다.

https://medium.com/@MeenoTeK/xml-views-or-jetpack-compose-which-is-the-best-option-for-your-next-project-ccf38573a82

XML VIEWS OR JETPACK COMPOSE: WHICH IS THE BEST OPTION FOR YOUR NEXT PROJECT?

 

3. 과거 요 글을 통해 MVI에 대해서 좀 파악했었다. 당시 나는 MVI는 이슈를 만들지 않겠다는 의지로 사용자 입력에 대한 통제 /관리 끝판왕으로 Intent가 등장한 것이 아닐까 생각했었다. 의존성을 고려할 때 MVI는 단방향 데이터에 커플링이 없어서 아키텍처로는 괜찮은 거 같다.

https://brunch.co.kr/@oemilk/113

MVC, MVP, MVVM, MVI

 

4. 왜 저자가 KMP를 권장했는지 확신할 수가 없지만, 일단 KMP가 좋다는 글을 찾는 봤다. 비즈니스 로직 등 모듈 공유가 다양한 플랫폼 간 가능하는 것이 아키텍처를 재사용할 수 있다는 점은 장점인 것 같다.

https://blog.stackademic.com/the-unique-advantages-of-kotlin-multiplatform-over-other-cross-platform-solutions-2d843c2813d5

The Unique Advantages of Kotlin Multiplatform Over Other Cross-Platform Solutions

 

3. MVI 

글에서 MVI에 대해 간략히 설명했다.

MVI는 Model-View-Intent의 약자이다.

기본 원리는 인풋 Intent를 받아서 기본 UI를 표현하는 ViewState를 생성하는 state machine이라고 한다.

MVVM과는 다르게 SSoT(Single Source of Truth) 원칙이 있다고 한다.

SSoT 의미에 대해 찾아보기.

 

https://en.wikipedia.org/wiki/Single_source_of_truth

Single source of truth - Wikipedia

https://chancethecoder.tistory.com/45

SSOT(Single Source of Truth)란?

 

'데이터 소스는 한 군데에서만 관리/통제해야지 여러모로 좋다'는게 SSoT.

 

MVI 참고

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

 

 

4. 활용 예제

Jetpack Compose와 MVI를 이용한 예제 코드에 대한 설명이 나온다. 

 

reducer interface가 등장한다. 이 reducer interface는 UI와 ViewModel간의 계약(contract)라고 설명한다. mvi 에서 reducer의 역할이 이전 상태 값에서 최신 상태 값을 만드는 것을 고려할 때 reducer interface가 이런 역할을 할 것이다.

이 reducer interface에 세 가지 object inteface(ViewState, ViewEvent, ViewEffect) 와  reduce 함수(이전 상태 인풋으로 최신 상태 아웃풋 반환)가 있다.

 

세 가지 object interface를 보자. ViewState, ViewEvent, ViewEffect 요 세 가지가 있다.

• ViewState : Compose UI의 상태. 화면의 요소들의 상태 정보들이 담긴다.
• ViewEvent : 사용자와 화면의 상호작용 (상호작용 이상일 수도 있다). ViewModel 안의 상태를 변경시킨다.
• ViewEffect :  ViewEvent의 일종이라고 하는데, 이 부분은 잘 이해가 가지 않는다. 오히려 ViewState가 상시적인 UI  상태라면, ViewEffect는 일회성/단발성 UI 동작이 않을까 싶다. 화면이동, Toast, SnackBar 노출과 같은 View의 동작들을 의미하기 때문이다. ViewEvent의 결과로 만들어질 수 있다.

 

reduce 함수는 ViewState와 ViewEvent를 받아서, 새로운 ViewState와 ViewEffect를 반환한다. 

 

MVI에는 나오는 intent 라는 개념이 코드 상 구현되지 않은 것을 보고, 상세히 파악하고 싶어졌다.

 

MVI 개념에서의 View는 Compose의 Screen으로 보면 되겠다. 원래 View가 Intent를 observe한다는데, 구현 코드를 보니 클릭 이벤트 같은 사용자 상호작용 입력 시에 관련한 ViewEvent를 생성해 viewmodel로 보낸다. Interaction을 Intent로 보는 듯 하다. Model이 바로 상태(ViewState)겠다.

 

예제 코드를 보다가 TimeMachine이라는 존재도 알게 되었다.

 

원문에서 TimeMachine과 관련해 참고한 글이다.

https://medium.com/@VolodymyrSch/android-simple-mvi-implementation-with-jetpack-compose-5ee5d6fc4908

Android: Simple MVI implementation with Jetpack Compose