[7주차/필수과제] 컴포넌트화 및 UI단 설계를 진행한 내용을 적어주세요.

[jihyunniiii]

🎤 토론 과제 - MVI 패턴을 사용한 UI 단 설계를 진행한 내용을 적어주세요.

𝟏. MVI 패턴을 사용한 UI 단 설계를 진행하며 고민한 내용들을 정리해서 남겨주세요.
(노션 및 다른 툴을 이용해서 정리한 후 링크를 첨부하는 것을 추천드립니다.)

𝟐. MVI 패턴을 사용한 UI 단 설계를 진행하며 느낀점 및 어려웠던 점을 공유해주세요.
(어떻게 해결했는지까지 적어주시면 좋습니다.)

[serioushyeon]

𝟏. MVI 패턴을 사용한 UI 단 설계를 진행하며 고민한 내용

Wavve UI 로직 설계

1. Event와 Effect 네이밍을 어떻게 하면 좋을 지 : Event는 사용자 입장에서 볼 때 해당 이벤트가 어떻게 보이는 지(사용자 행동)에 초점을 맞춰 네이밍하고, Effect는 그로 인해 발생하는 결과(동작)에 초점을 맞추어 네이밍 했습니다. 다들 네이밍 어떻게 하고 계신가요..?
   → Ex) 닫기 버튼 클릭 Event 네이밍 : Close / 닫기 버튼 클릭 시 화면 전환 Effect 네이밍 : NavigateUp

2. 어디서부터 어디까지를 뷰 모델이 관리하는 이벤트로 둘 지.. 이벤트 자체에 대한 의미에 대해 고민함
   → 하단 아티클을 참고했습니다!

https://medium.com/@apfhdznzl/android-ui-layer-ui-event-20a02b7bdada

이벤트로 인해 요구하는 것이 비즈니스 로직인지 아니면 UI 로직 인지에 따라 이벤트 처리 방식이 다릅니다.비즈니스 로직을 요구한다면 (ex. 계산기에서 계산 결과 버튼 클릭, 새로고침버튼 클릭 등), ViewModel에 이벤트를 전달하고 이벤트에 해당하는 비즈니스 로직이 수행되고 그 결과로 UIState를 업데이트 시켜 UI에 반영합니다. (UI -> ViewModel -> UI) UI 로직을 요구한다면 (ex. 권한요청, 버튼 클릭시 화면이동, 토스트 띄우기 등), UI에서 발생한 이벤트를 바로 UI에서 처리하면됩니다.

𝟐. MVI 패턴을 사용한 UI 단 설계를 진행하며 느낀점 및 어려웠던 점

MVI 패턴을 적용할 때 러닝커브가 조금 있었지만, 틀을 잘 짜두니 그 후에는 이벤트나 사이드 이펙트를 관리하는 데에 더 수월함을 느낄 수 있었습니다!

MVI와 직접적인 관련은 없지만, 이번 리팩토링 과정에서 전반적인 코드를 점검하며 SharedPreferences 처리 방식에 대해 고민했습니다. 기존에 SharedPreferences 관련 코드가 UI 단에 포함되어 있었는데, UI 로직이 아니기 때문에 ViewModel에서 처리하는 것이 적합하다고 판단했습니다. 다만, ViewModel에서 Context를 직접 참조하는 것은 적절하지 않다고 생각되었고, 이에 대한 해결 방법을 찾던 중 Hilt의 @ApplicationContext 어노테이션을 알게 되었습니다. 이를 활용해 SharedPreferences를 ViewModel에 주입함으로써, Context를 직접 참조하지 않고 필요한 데이터를 처리할 수 있었습니다.

초기 상태나 데이터를 불러오기 전, null이나 emptyList와 같은 값이 있을 경우 UI를 어떻게 처리할지에 대한 고민이 있었습니다. 예를 들어, 홈 화면에서 더미 데이터를 ViewModel의 init 블록으로 불러올 때는 값이 비지 않지만, LaunchedEffect(Unit)을 사용하여 데이터를 로딩하면 기본값인 emptyList가 먼저 렌더링되면서 에러가 발생하는 문제가 있었습니다. 저는 init 블록 대신 LaunchedEffect(Unit)을 그대로 사용하면서, 해당 리스트를 사용하는 컴포넌트에서 emptyList에 대한 예외를 처리하는 방식으로 접근했습니다. 적용은 안했지만 isLoading과 같은 상태 값을 활용하는 것도 방법이 될 듯 합니다! 혹시 더 좋은 방법을 아신다면 조언 부탁드립니다😭