[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과 같은 상태 값을 활용하는 것도 방법이 될 듯 합니다! 혹시 더 좋은 방법을 아신다면 조언 부탁드립니다😭

[HAJIEUN02]

MVI 패턴을 사용한 UI단 설계

7차 과제 UI 설계(MVI)

느낀점 및 어려웠던 점

안드로이드 초기 데이터 로드 해당 아티클 및 합동세미나를 거쳐 오면서 초기 데이터 로드에 LaunchedEffect(Unit)를 사용하던 것을 수정했는데요! MyViewModel을 보시면 다음과 같이 flow를 이용해서 emit하고, 이를 관찰하던 MyRoute에서 해당 state가 Success인 경우 MyScreen을 호출하는 것으로 구현을 해두었습니다.

이번에 Home 뷰도 My 뷰처럼 flow를 이용해서 수정하고 싶었는데 어떻게 수정해야 할지 감이 잘 안 오더라구요ㅜ.ㅜ 일단 LaunchedEffect(homeUiState)를 이용해서 Idle인 경우 뷰모델의 setHomeImgList(실제 앱이라면 서버통신 하는 함수)를 호출하는 것으로 구현을 해두었습니다. flow를 이용해 좀더 깔끔하고 좋은 방향으로 개선할 방법이 있을까요? 조언해주시면 감사하겠습니다!

MY

@HiltViewModel
class MyViewModel @Inject constructor(
    private val patchUserHobbyUseCase: PatchUserHobbyUseCase
) : ViewModel() {
    val myUiState: StateFlow<MyUiState> =
        flow<MyUiState> {
            runCatching {
                patchUserHobbyUseCase()
            }.onSuccess { data ->
                emit(MyUiState.Success(data.hobby))
            }.onFailure { throwable ->
                emit(MyUiState.Error(throwable.message))
            }
        }.catch { throwable ->
            emit(MyUiState.Error(throwable.message))
        }.stateIn(
            scope = viewModelScope,
            started = SharingStarted.WhileSubscribed(5_000),
            initialValue = MyUiState.Loading
        )
}

@Composable
fun MyRoute(
    paddingValues: PaddingValues,
    myViewModel: MyViewModel = hiltViewModel()
) {
    val uiState by myViewModel.myUiState.collectAsStateWithLifecycle()

    when(val myUiState: MyUiState = uiState) {
        is MyUiState.Success -> {
            MyScreen(
                modifier = Modifier.padding(paddingValues),
                userHobby = myUiState.hobby
            )
        }
        else -> Unit
    }
}

Home

class HomeContract {
    data class HomeState(
        val homeInitialState: HomeUiState = HomeUiState.Idle,
        val pagerState: PagerState = PagerState(pageCount = { 0 })
    ) : UiState

    sealed class HomeUiState {
        data class Success(
            val bannerImgList: List<String>,
            val editorRecommendedList: List<String>,
            val todayTopRankingList: List<String>
        ) : HomeUiState()

        data object Loading : HomeUiState()

        data class Error(val message: String? = null) : HomeUiState()

        data object Idle : HomeUiState()
    }
}

@Composable
fun HomeRoute(
    paddingValues: PaddingValues,
    homeViewModel: HomeViewModel = hiltViewModel()
) {
    val homeState by homeViewModel.uiState.collectAsStateWithLifecycle()
    val homeUiState: HomeContract.HomeUiState = homeState.homeInitialState

    LaunchedEffect(homeUiState) {
        if(homeState.homeInitialState == HomeContract.HomeUiState.Idle) {
            homeViewModel.setHomeImgList()
        }
    }

    when (homeUiState) {
        is HomeContract.HomeUiState.Success -> {
            val pagerState = rememberPagerState(pageCount = { homeUiState.bannerImgList.size })

            HomeScreen(
                modifier = Modifier
                    .padding(paddingValues),
                bannerImgList = homeUiState.bannerImgList,
                pagerState = pagerState,
                editorRecommendedImgList = homeUiState.editorRecommendedList,
                todayTopRankingImgList = homeUiState.todayTopRankingList
            )
        }

        else -> Unit
    }
}

[jm991014]

𝟏. MVI 패턴을 사용한 UI 단 설계

UI 설계

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

세미나 자료를 기반으로 BaseViewModel을 만들고 적용해봤는데, 확실히 러닝 커브가 높아서 그런지 어렵네용.. 머리로는 이해가 되는데 막상 적용하는데 있어서는 아직 좀 서툰 것 같습니다. 서버 통신 관련해서도 Loading과 관련된 상태를 추가해보려 했는데, 이건 좀 더 성장한 뒤 적용해보겠습니다..

[boiledEgg-s]

1. MVI 패턴을 사용한 UI단 설계

7주차 UI 설계 노션

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

막연하게 어렵다고 생각해서 넘어갔던 MVI를 연습해볼 수 있었어서 너무 뜻깊은 과제였어요!

근데 세미나에서 다룬 코드에서 사용한 여러 가지의 접근제어자라던가 open과 같은 키워드들이 왜 사용되는지는 이런 작은 프로젝트에선 몸소 느낄 수 없었어서 그 부분이 살짝 아쉽고 아직도 이해가 안가긴 합니다!

또한 제가 현재 마이페이지에서 룸을 사용하고 있는데, 룸 데이터를 불러오기 위한 Stateflow를 BaseViewModel에서 같이 관리하기가 어려운 것 같더라고요,, 그래서 BaseViewModel은 상속받되 룸 flow는 따로 관리하도록 했는데, 이걸 BaseViewModel의 UiState로 같이 관리할 방법이 있을까 싶네요..

[1971123-seongmin]

1. MVI 패턴을 사용한 UI단 설계

7주차 토론 과제

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

기존 사용하던 BaseViewModel에서 세미나에 나와있던 BaseViewModel로 더 추가하고 수정해서 적용해 봤는데 이해 안가는 부분들이 조금 있어서 홈화면, 마이페이지에 적용해보면서 더 익힐 수 있도록 해보겠습니다.

[Roel4990]

1. MVI 패턴을 사용한 UI단 설계

아래 노션에 정리했습니다.

7주차 토론 과제

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

처음엔 어떤식으로 구현해야될지 많은 고민이 있었고, 다른 분들의 코드를 참고하였습니다.
우선 BaseViewModel을 통해 Event 랑 Effect 정리하기에 보기 편한 방식을 찾기 위해 잘 작업된 코드를 참고하며 작업했습니다.
BaseViewModel 에서 reduceState 를 만들어 Event 를 관리하고

override fun reduceState(event: HomeContract.Event) {
    viewModelScope.launch {
        when (event) {
            is HomeContract.Event.CategoryClicked -> {
                // 카테고리 클릭 이벤트 처리
            }

            is HomeContract.Event.ComponentClicked -> {
                // 특정 이미지 클릭시 특정 화면으로 이동(미구현)
            }
        }
    }
}

Screen에서 �Effect 를 한번에 볼수 있도록 아래의 코드로 관리하는 방법을 사용했습니다.

val effects = viewModel.effect.collectAsState(initial = null).value

// 효과 처리
LaunchedEffect(effects) {
    when (effects) {
        is SignUpContract.Effect.NavigateToSignIn -> {
            onNavigateToSignIn()
        }

        is SignUpContract.Effect.ShowSuccessMessage -> {
            Toast.makeText(context, effects.message, Toast.LENGTH_SHORT).show()
            onNavigateToSignIn()
        }

        is SignUpContract.Effect.ShowErrorMessage -> {
            Toast.makeText(context, effects.message, Toast.LENGTH_SHORT).show()
        }

        else -> {}
    }
}

[ThirFir]

1. MVI 패턴 이용한 설계

https://marsh-supply-dc3.notion.site/MVI-15fccbd9b928806c9befdce73a7b864c?pvs=4

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

사고가 MVVM에 갇혀 있어서 그런지, 어떻게 해야 효과적인 구조가 완성될지 아직은 잘 모르겠네요. 마이그레이션을 해보면서 MVI에 대한 이점을 크게 보지 못한 것 같아서 개인적으로 조금 아쉬웠습니다.
아직은 익숙하지 않고, MVI만의 장점을 크게 못 느끼겠지만, MVI가 트렌드인 만큼 학습을 해보며 좀 더 체화시킬 필요가 있을 것 같습니다.

[gitsuhyun]

MVI 패턴을 이용한 설계

Wavve UI 로직 설계

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

기존의 코드를 mvi 패턴으로 리팩토링 하려하니 context, dispatcher 등등 생각지도 못한 부분에서 문제가 발생하였습니다. 아직 sideEffect, event 등의 개념을 잘 숙지하지 못한 것 같아서 많이 연습해봐야 할 것 같습니다..!!

[hyoeunjoo]

MVI 패턴을 이용한 설계

UI 로직 설계

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

MVVM처럼 직접적으로 상태를 업데이트하는 것이 아니라 Reducer를 통해 새로운 상태를 생성해야 한다는 개념이 낯설었습니다. 아직 setState를 통해 기존 상태를 복사하고 새로운 상태를 만든다는 과정이 익숙하지 않아서 조금 어려웠던 것 같습니다

[Hyobeen-Park]

MVI 패턴을 이용한 설계

MVI 패턴을 이용한 설계

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

MVI를 제대로 적용해보는 것은 처음인 것 같은데요..!! 제가 제대로 아는 것이 하나도 없다는 것을 깨달았습니다😂 뭔가 세미나 자료를 보면서 적용해보고 있는데 open이나 아니면 handleEvent를 protected abstract suspend fun로 구현하는 이유 등등 진짜 적용만!! 할 수 있는 상태인 것 같아서 좀 더 자세히 공부해봐겠다고 생각했습니다..!!

MVI와 친해질 수 있는 좋은 과제였어요😊

[0se0]

MVI 패턴을 이용한 설계

7주차 UI 로직

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

MVI 패턴을 구현하면서 State와 Event를 구분하는 과정에서 어려움을 겪었고, 특히 LoginEvent를 State에서 관리하는 것이 적절한지, SideEffect로 분리하는 것이 더 나은지에 대한 고민이 있었습니다. 또한 UI 관련 상태(isPasswordVisible, isFocused 등)와 비즈니스 로직 관련 상태(loginEvent 등)를 하나의 State 클래스에서 관리하다보니 조금 복잡해져서 어려웠습니다.

[wjdrjs00]

MVI 패턴을 이용한 설계

https://wooded-damselfly-4cc.notion.site/7-15fa2c11608680a79483e82ebd556d04?pvs=4

---

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

-> 우선 처음 접하는 디자인패턴이기도 했고, 단방향 흐름 + 상태를 단일 소스로 관리한다는 점 때문인지 기존의 mv시리즈와 달리 이해하기가 어려웠습니다,,!
-> 또한 contract와 reducer와 같이 처음 들어보는 용어도 등장하고, 구현 방법이 다양(개인별..? 라이브러리 사용도 하는거 같음,,)하다는 점에서 꽤나 깊이가 필요한 디자인패턴으로 다가왔습니다!
-> 그래서 결론은 열심히 공부 후 적용하여 직접 mvi패턴의 이점을 느끼는 순간까지 노력해야지,, 생각했습니다!

[tunaunnie]

MVI 패턴을 이용한 설계
https://atom-lathe-6d0.notion.site/SOPT-7-15f23b9571c48038862acbb719deaf6e?pvs=4

MVI 패턴을 사용한 UI 단 설계를 진행하며 느낀 점 및 어려웠던 점
상태를 수정하는 것이 아닌, 새로 수정한다는 개념이 아직 모호하게 느껴지는 것 같습니다. 어려웠던 점은 init을 사용해서 초기에 유저 데이터를 localdatasource로부터 load 해오도록 구현하는 부분이 가장 헷갈렸습니다..!

[kangyein9892]

MVI 패턴을 이용한 설계
https://luxuriant-periwinkle-926.notion.site/7-15f724e2582680d3aed1ec1fe37cf9aa?pvs=4

MVI 패턴을 사용한 UI 단 설계를 진행하며 느낀 점 및 어려웠던 점
어떤 것을 event(intent)로 하고 sideeffect로 해야하는지 알고 있지만서도 개발하다보면 아직은 헷갈리는 것 같습니다...! 그리고 contract, reducer와 같은 개념이 아직은 이해가 다 되지 않아서 어려운 것 같습니다...!! loading 부분이나 네트워크 통신 관련된 부분도 함꼐 다루면 좋을 것 같은데 그 부분은 아직 고민이 필요한 것 같습니다...!!

[sayyyho]

MVI 패턴을 이용한 설계

https://www.notion.so/sayyyho/MVI-15f059afc20e8033a6b5f3d0c4d790af?pvs=4

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

MVVM에서는 보통 ViewModel에서 상태를 바로 업데이트하고 UI와 연결되는데, MVI에서는 상태 변화가 직접적으로 이루어지지 않고, Reducer 등 새로운 개념을 통해 생성하는 구조에 익숙지 않아서 어려웠습니다.

[hyeeum]

1. MVI 패턴 이용한 설계

https://lively-sweater-80a.notion.site/7-_-15f854da2420807fb1fce786add59698?pvs=4

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

시간이 없어서...너무 급하게 된 것 같습니다
평소 MVI 개념은 익히 들어봤으나 본격적으로 하게 되니 구조적으로 조금씩 변경해야 할게 있었는데 그게 조금조금씩 있다보니 변경점을 찾는 것이 좀 어려웠던 것 같습니다..! 처음에는 event sideEffect가 뭔지 헷갈렸는데 state변경 유무에 따라 구분해야한다는 설명을 듣고 이해하게 된 것 같습니다! BaseViewModel 을 사용해서 해볼까 하다가 모든 화면에 state/event/sideeffect가 필요하지는 않은 것 같아서 생략했는데요 -> 이부분에서 조금 고민을 했던 것 같습니다. 사실 state/sideeffect/event 추가할 때(뷰모델 세팅 때) 작성해야 할 코드가 많은데 <-> 사용하지 않는 코드가 있는데 base에 넣자니 base에 의미에 다가가는 것일까? baseViewModel이라는 의미에 맞지 않는 것 같기도 하고.. MVI 부분보다 다른 곳에 더 집중을 했던 것 같네요...

[hwidung]

https://secretive-stargazer-15c.notion.site/7-MVI-15f14b7e1eff80188c0fdbace39dd96a

mvi를 사용하면서 state 관리하는 것이 어려웠습니다. UI가 바로 업데이트 되지 않아 오류를 수정하는데 어려움을 겪었습니다..!

[beom84]

https://www.notion.so/7-15499c2ffa5680828815f3dec194bb1d?pvs=4

MVI를 처음 사용해서 감을 잡기 어려웠지만 , 하고나니 깔끔한 코드가 좋았습니다!!

[SYAAINN]

1. MVI 패턴 설계

7주차 필수과제

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

State 를 활용해 설계해놓은 점이 비슷해 적용하는데 크게 어렵지 않을 것이라 생각했는데,
데이터 단방향 흐름 등을 생각하면서 설계하려니 어디서 뭘 가져와서 사용해야 하는지 흐름이 좀 헷갈렸던 것 같아 추가적으로 사용해보면서 익혀가야 할 것 같습니다! ㅠㅠ 컴포넌트 내에 구현 되어있는 이벤트 기능들은 어떻게 Event로 설계해야 하는 지가 많이 고민되었네요

[angryPodo]

1. 7주차 토론과제

2. 느낀점 및 어려웠던 점

어려웠던 점

1. 상태 설계의 복잡성

   • 문제: 화면의 모든 상태를 하나의 State 클래스에서 관리하다 보니 복잡도가 증가
   • 해결: 관련 상태들을 논리적으로 그룹화하고, 필요한 경우 중첩 데이터 클래스를 사용

2. 이벤트 처리 일관성

   • 문제: 비슷한 이벤트들이 다른 방식으로 처리되는 문제
   • 해결: 이벤트 명명 규칙을 수립하고 패턴화하여 일관성 확보

3. SideEffect 사용 시점

   • 문제: State와 SideEffect 중 어떤 것을 사용할지 결정하기 어려움
   • 해결: "일회성, 비상태 종속적 동작"을 기준으로 SideEffect 사용 여부 결정

좋았던 점

1. 예측 가능한 상태 관리

   • 단방향 데이터 흐름으로 상태 변화 추적 용이
   • 디버깅이 쉬워짐

2. 명확한 책임 분리

   • UI 상태, 이벤트, 부작용이 명확히 구분됨
   • 코드 유지보수성 향상

3. 재사용성 향상

   • Contract 클래스를 통한 인터페이스 통일
   • 공통 패턴 수립으로 개발 생산성 향상

[imtaejugkim]

MVI 설계

7주차 과제 노션

MVI 설계 시 느낀점 및 어려웠던 점

기존 데이터 호출 시에만 사용했던 State에서, Screen에서의 변화와 상태를 추가로 관리해야한다는 점에서 설계때에는 어려웠던 것 같습니다..! 하지만 baseviewModel과 state, event, effect가 어느정도 틀이 잡히니 코드가 일관성이 생기고 명확히 구분될 수 있었던 것 같네요!

[MinseoSONG]

MVI 설계

7주차 과제

MVI 설계 시 느낀점 및 어려웠던 점

MVI를 처음 접해보고, 적용하면서 많이 헷갈리고 어려웠지만 적용하고 나니 코드가 훨씬 깔끔해져 보기 좋아졌어요
더 많이 공부해보고 더 정확히 적용해보고 싶습니다 !

[chrin05]

𝟏. MVI 패턴을 사용한 UI 단 설계를 진행하며 고민한 내용들을 정리해서 남겨주세요.
7주차과제 노션링크

𝟐. MVI 패턴을 사용한 UI 단 설계를 진행하며 느낀점 및 어려웠던 점을 공유해주세요.
처음 적용해보았는데, 관리해야하는 상태가 많은 경우 상태 관리를 보다 깔끔하게 할 수 있다는 것을 많이 느꼈습니다. event랑 sideEffect 중 어떤 걸로 할지 고민을 많이 하면서 과제를 했던 거 같습니다. 아직은 부족하지만, 앱잼 때 제대로 쓸 수 있도록 좀더 공부를 해보고자 합니다.

[yskim6772]

𝟏. MVI 패턴을 사용한 UI 단 설계를 진행하며 고민한 내용들을 정리해서 남겨주세요.
7주차 과제 - MVI UI단 설계

𝟐. MVI 패턴을 사용한 UI 단 설계를 진행하며 느낀점 및 어려웠던 점을 공유해주세요.
MVI 패턴을 코드에 적용하는 것은 처음이었는데, Event와 SideEffect 중 어떤 것으로 해야 하는지에 대한 고민도 있었고, BaseViewModel을 사용하는 방법이 최적의 방법일지 대해서도 고민을 하면서 진행했던 것 같습니다. 코드는 간결해졌는데, 아직 확실하게 상태 관리 및 설계를 진행한 것 같지는 않아서, 조금 더 공부한 후 리팩을 진행해보고자 합니다.