Swemo - Iteration 3: 메모 화면의 State & Event 체계 정리

#1 개발 목표 (Iteration Goal)

#1-1 이상(Ideal)과 징검다리

이상(Ideal)

사용자 관점에서 직관적인 메모 앱을 만들어야 한다. 사용자의 의도에 걸맞은 행동을 유도할 수 있어야 하고, 사용자가 의도가 드러나는 결과를 보여주어야 한다.

 

Iteration 3: 메모 화면의 State & Event 체계 정리

지금까지 구현한 UI는 일종의 뼈대에 불과했다. 이 뼈대에 붙일만한 '살'이란, 사용자 행동에 의한 상호작용(Event) 그리고 상태(State)의 변화다. 앱에서 사용자에게 제공할 '직관적인 행동'이 무엇인지를 정의하고, (좋은 방향으로) 업데이트 해나가야 한다. 

 

#1-2 개발 범위

이번 개발 범위 (In Scope)

1. State down / Event up 구조 확립
   • Screen은 ViewModel을 몰라야 함
   • ViewModel은 Compose State를 몰라야 함
2. ViewModel 구현
   • ViewModel 보유할 State와 UI 단에서 보유할 State (DrawerState 등)를 구분
   • 이벤트 발생에 따른 State 업데이트를 위한 onEvent() 함수 보유
     • 전체 코드의 평균 가독성이 저해되기에 진행하지 않음 (참조: #2-2)
3. MemoUiState 클래스 구현
   
   • ViewModel에서 관리할 모든 State를 Wrapping 한 클래스
4. MemoEvent 클래스 구현
   • Event sealed interface
   • 전체 코드의 평균 가독성이 저해되기에 진행하지 않음 (참조: #2-2)
5. MemoScreen 업데이트
   • 매개변수로 State 및 Event만 받도록 업데이트

 

범위 외 (Out of Scope)

1. Data layer 관련
2. IME, focus, scroll 관련
3. UI 다듬기
   
   • 애니메이션
   • 세부 레이아웃 미세조정
   • 디자인 개선
4. 성능(최적화) 관련
   
   • derivedStateOf 최적화
   • recomposition 분석
   • snapshotFlow 사용

 

#2 변경 내역 (커밋 목록)

#2-1 Iteration 3-1: ViewModel 도입 및 State 정리

Swemo의 MemoScreen에는 MemoEditor가 존재하고, 이 컴포넌트에서 (앞으로의 구현에서) 꽤 복잡한 State 및 Event가 존재할 터다.

data class MemoUiState(
    val categories: List<Category> = emptyList(),
    val selectedCategory: Category? = null,
    val memos: List<Memo> = emptyList(),
    val allLabels: Set<String> = emptySet(),
    val editorState: EditorState = EditorState()
) {
    data class EditorState(
        val isVisible: Boolean = false,
        val editingMemo: Memo? = null
    )
}

그래서, MemoUiState 속에 inner class로 EditorState를 (별도로 분리해) 선언했다.

 

의존성 관리를 위해 Hilt 등의 라이브러리들을 추가했고, 마무리로 이 스크립트를 통해서 Now in Android와 버전 카탈로그에서의 프로터피명을 맞춰주었다.

 

관련 개발 범위

• State down / Event up 구조 확립
• ViewModel 구현
• MemoUiState 클래스 구현

 

주요 변경점

• MemoViewModel 도입 (의존성 주입은 Hilt를 이용)
• MemoUiState로 MemoScreen의 모든 State를 객체 하나로 통합(Wrapping)

 

얻은 경험치

• MemoScreen 매개변수에 들어갈 람다 함수를 함수 참조(Callable Reference)로 표기해 봤다. 가독성 면에서 훨씬 나았다.

 

참고

• [GitHub] 이 작업의 Commit
• [Tistory] Gradle, 버전 카탈로그
• [Tistory] 내 프로젝트와 Now in Android의 버전 카탈로그 속 프로퍼티명 맞추기

 

#2-2 Iteration 3-2: Event 관리를 위한 구조 설계

#2-1에 맞춰, 예전에 배운 방식대로 MemoEvent를 만들어서 Event 관리를 하려고 했다.

// 추가하려고 했던 코드

sealed interface MemoEvent {
    data class SelectCategory(val category: Category) : MemoEvent
    data class AddMemo(val memo: Memo?) : MemoEvent
    data class ChangeAddCategoryDialogVisibility(val visible: Boolean) : MemoEvent

    sealed interface MemoEditor : MemoEvent {
        data object ToggleVisibility : MemoEditor
    }
}

이렇게 Event를 sealed interface로 묶는 것이 보기에는 통합성 있어 보인다. 이후 MemoViewModel에 fun onEvent(event: MemoEvent)를 선언해서 MemoScreen으로부터 Event를 받는 방식으로 바꾸려 했다. 하지만 실제 프로젝트에 적용해 보니 문제가 발생했다.

 

// in MemoScreen.kt

ModalNavigationDrawer(
    ...
    drawerContent = {
        CategorySelector(
            ...
            onAddCategoryButtonClick = {
//              onAddCategoryDialogVisibilityChange(true)
                onEvent(MemoEvent.ChangeAddCategoryDialogVisibility(true)) // 복잡해졌다
            }
        )
    }
)

주석 처리된 코드가 원래 코드인데, 그 아래 코드와 같이 가독성이 나쁜 코드로 바꿔주어야 했기 때문이다. 따라서, 나중에 Event가 정말 많이 복잡해져서 집중 관리를 해줘야 할 필요가 생기기 전까지는 (MemoEvent 등으로) Event들을 묶지 않기로 했다.

 

결론적으로 이번 커밋에선, 아직 MemoScreen에 남아있던 이벤트 선언부들을 ViewModel로 올리고 코드를 약간 다듬는 정도로 마무리했다.

 

관련 개발 범위

• State down / Event up 구조 확립

 

주요 변경점

• MemoScreen에 남아있던 이벤트 선언부들을 ViewModel로 올림

 

코드 스니펫 - MemoScreen 호출부

MemoScreen(
    uiState = uiState,
    drawerState = drawerState,
    // events
    onCategorySelected = viewModel::selectCategory,
    onAddMemoClick = { viewModel.addMemo() },
    onMemoEditorToggleButtonClick = viewModel::toggleEditorVisibility,
    onAddCategoryDialogVisibilityChange = viewModel::changeAddCategoryDialogVisibility,
)

Event가 하나 추가될 때마다 람다 함수 매개변수가 하나씩 늘어날 것이다. MemoEvent 및 MemoViewModel.onEvent()가 있었다면, 모든 이벤트 람다 함수를 onEvent = viewModel::onEvent 로 퉁칠 수 있었을 것이다. 하지만 이런 이득보다, 다른 부분에서 발생하는 가독성적인 손실이 더 클 것이다.

 

얻은 경험치

• 당연하게도, 함수 참조(Callable Reference)는 매개변수가 없을 때만 쓸 수 있다.

 

참고

• [GitHub] 이 작업의 Commit
• [Tistory] [Android] Jetpack Compose - 객체 지향적 UI 레이어 설계

 

#2-3 Iteration 3-3

추가 예정.

 

#3 테스트

추가 예정.

 

#4 개발 결과 (Iteration Outcome)

추가 예정.