안드로이드 아키텍처 및 패턴

기본 원칙

안드로이드에서 권장하는 3가지 계층에 따라 설계되었습니다.
MVI패턴에 따라 데이터 흐름이 단방향으로 이루어지도록 설계되었습니다.

폴더 구조

├── Application.kt
├── MainActivity.kt
├── data
│   ├── model
│   ├── repository
│   ├── service
│   └── source
├── di
├── domain
│   ├── model
│   ├── repository
│   └── usecase
├── navigation
│   └── NavHost.kt
├── ui
│   ├── component
│   │   └── login
│   │       └── LoginItem.kt
│   ├── screen
│   │   ├── common
│   │   └── login
│   │       ├── LoginIntent.kt
│   │       ├── LoginScreen.kt
│   │       ├── LoginSideEffect.kt
│   │       └── LoginState.kt
│   └── theme
│       ├── Color.kt
│       ├── Font.kt
│       ├── Theme.kt
│       └── Type.kt
└── viewmodel

MVI 패턴

MVI (Model-View-Intent) 패턴에서는 데이터 흐름이 단방향으로 이루어진다.

상태 변경은 Intent로 명확히 정의된다. View에서 발생한 Intent를 통해 Model이 변경되고, Model이 변경되면 반응하여 View가 변경된다.

Group 1597880837

장점

Intent에서 상태 변경이라는 의도(Intent)가 정의된다. 그렇기 때문에 그 의도가 명확해진다. 데이터 흐름이 단방향이며 추적하기가 쉽다.

UI 이벤트가 바로 데이터 변경으로 반영되는 것(예: 버튼 클릭 -> count++)보다는, 이러한 의도(Intent)가 정의된 객체를 호출하고 이를 통해 동작이 발생하도록 하는 것(버튼 클릭 -> 갯수 증가 -> count ++)이 명시성을 높입니다. 기존 코드 작성시에도 ui event 스코프에서 직접 동작이 이루어지기보다는, 명확하게 정의된 중간 로직을 거쳐서 동작을 발생시키는 것을 선호했습니다. mvi 패턴은 이를 체계화하고 intent들을 분리해서 모아서 확인할 수 있어 데이터 흐름과 그 흐름의 의도를 보다 쉽게 파악할 수 있고, 디버깅하기에도 편합니다.

상태는 불변(Immutable)하게 유지하는 것을 원칙으로 한다. 단일 상태 관리 방식은 안드로이드의 Recomposition 개념과 잘 맞아떨어진다. 속성에 직접 접근하여 상태를 변경하는 대신, 불변의 상태 객체를 사용하고 변경할 때는 기존 객체를 복제한 새로운 객체를 생성해서 전체 State를 변경한다. 이로써 동시성 문제를 방지하고, 스레드 안전성을 확보할 수 있다.

사이드 이펙트

앱 외부 데이터를 변화시키거나, 외부로부터 내부 데이터를 변화시키는 행위

mvi 패턴에서 state를 변경하는 것이 intent이라 정의했지만, state를 변경하는 것 외에도 발생하는 이벤트들이 존재, 이를 대응하는 것이 side-effect
Intent에 해당하지 않지만 View에서 동작한다

예시) 토스트 출력, 네비게이트를 통해 다른 스크린으로 이동, 파일 피커 출력

이 프로젝트에서는 intent에 함께 정의해서 viewModel에서 동작시키지만 intent에서 한번더 sideEffect에서 정의한 클래스를 동작시키는 로직을 적용

적용 예시

Model 정의

// ui/viewmodel/SignUpClientState.kt
package com.hm.picplz.ui.screen.sign_up

import ...

data class SignUpClientState(
    val currentStep: Int? = 0,
    val isLoading: Boolean = false,
    val error: Throwable? = null,
    val userInfo: User = emptyUserData,
    val nickname: String = "",
    val profileImageUri: Uri? = null
){
    companion object {
        fun idle(): SignUpClientState {
            return SignUpClientState(
                currentStep = 0,
                isLoading = false,
                error = null,
                userInfo = emptyUserData,
                nickname = "",
                profileImageUri = null
            )
        }
    }
}

data class를 통해 해당 영역에서 사용할 state들을 정의해 준다.

data class

코틀린에서 객체를 정의해주는 방식

일반 class와 다른 점

컴파일 시 자동으로 equals(), hashCode(), toString(), copy(), componentN()과 같은 메소드들을 생성해준다.
생성자에 프로퍼티를 정의하고 클래스의 필드로도 다시 생성해야 하는 class와 달리 생성자에 프로퍼티만 입력하면 필드도 생성해준다. mvi패턴에서 state는 불변하게 유지할 것이고, 새로운 state를 적용하기 위해 .copy()를 사용할 것이기 때문에 data class를 사용한다.

companion object

클래스 내에서 선언된 객체. 내부에서뿐 아니라 외부에서도 선언하여 외부에서도 접근할 수 있는 객체 선언

idle(): state의 초기 상태를 선언하는 메서드

companion object로 선언했기에 인스턴스를 생성하지 않고도 idle()을 선언할 수 있다.

viewModel에서 호출

// ui/sign_up/sign_up_client/SignUpClientViewModel
package com.hm.picplz.viewmodel

import ...

class SignUpClientViewModel : ViewModel() {
    private val _state = MutableStateFlow<SignUpClientState>(SignUpClientState.idle())
    val state: StateFlow<SignUpClientState> get() = _state
    ...
}

viewModel은 State를 관리하고, intent가 호출되면 State를 변경하는 작업이 이루어지는 영역

_state

타입: MutableStateFlow<SignUpClientState> - 변경 가능한 상태 흐름 타입
초기값: SignUpClientState.idle()
상태를 변경할 수 있는 변수, 그렇기 때문에 private으로 선언되어 ViewModel 내부에서만 수정 가능

state

타입: StateFlow<SignUpClientState> - 변경 불가능한 상태 흐름 타입
get() = 읽기 전용으로 값을 가져오는 함수
view에서 이 state를 구독하여 사용
- view에서는 state를 변경하지 않기 때문에 읽기 전용으로 제공

Intent 정의

// ui/sign_up/sign_up_client/SignUpClientIntent.kt
package com.hm.picplz.ui.screen.sign_up.sign_up_client

import ...

sealed class SignUpClientIntent {
    data class SetUserInfo(val userInfo: User) : SignUpClientIntent()
    data class SetNickname(val newNickname: String) : SignUpClientIntent()
    data class SetProfileImageUri(val newProfileImageUri: Uri?) : SignUpClientIntent()
    data object NavigateToPrev : SignUpClientIntent()
    data class ChangeStep(val stepNum: Int) : SignUpClientIntent()
    data object ClickSubmitButton : SignUpClientIntent()
}

Intent는 상태를 조작하는 이벤트

이 파일 내에서 이 이벤트들을 명확하게 정의

sealed class

상속할 수 있는 하위 클래스의 정의를 제한하는 클래스

상태 관리를 할 때 사용한다

같은 파일 내에서만 하위 클래스를 정의할 수 있기 때문에 이 파일 내에 명확하게 하나의 계층으로 하위 클래스들을 정의 가능
when문을 사용할 때 모든 하위 클래스를 확인할 수 있도록 컴파일러가 확인해주어 엄격한 제어가 가능

클래스 상속

data class SetUserInfo(val userInfo: User) : SignUpClientIntent()에서 : SignUpClientIntent() 는 SetUserInfo라는 하위 클래스가 SignUpClientIntent라는 클래스를 상속했다는 의미

-> SignUpClientIntent 타입의 변수에서 SetUserInfo라는 클래스를 사용할 수 있고 viewModel에서 이를 이용해서 handleIntent함수의 변수로 SignUpClientIntent를 받고 그 하위 클래스로 각각의 정의된 동작들을 제어할 수 있다.

when문을 이용해 하위 클래스의 경우를 나누고 모든 하위 클래스가 조건으로 사용되는지 검증 가능

data object와 data class

데이터를 가지고 있어야 하는 경우 - data class

여러 인스턴스를 생성할 수 있다
데이터를 담고 전달하는 용도로 사용, 상태 관리에 쓰인다

데이터를 가지고 있지 않는 경우 - data object

싱글톤 : 단 하나의 인스턴스만 존재
단일 상태 관리에 쓰임

data {}

data를 앞에 붙이는 것은 데이터 관리에 사용된다는 뜻으로 sealed class(하위 클래스의 데이터를 관리하는 데 사용되는 클래스)의 하위 클래스에 적합

데이터 관리에 필요한 메소드(equals(), hashCode(), toString())들을 제공

종합

하위 클래스들의 상태 관리에 쓰이는 sealed class 상위클래스로 Intent 정의, 그 상위 클래스를 상속받은 하위 클래스들에 각 동작들을 정의하는데 데이터가 있는 경우 data class, 없는 경우 data object로 정의

viewmodel에서 intent 제어

class SignUpClientViewModel : ViewModel() {
    private val _state = MutableStateFlow<SignUpClientState>(SignUpClientState.idle())
    val state: StateFlow<SignUpClientState> get() = _state

    ...

    fun handleIntent(intent: SignUpClientIntent) {
        when (intent) {
            is SetUserInfo -> {}
            is SetNickname -> {
                val newNicknameState = _state.value.copy(nickname = intent.newNickname)
                _state.value = newNicknameState
            }
            is SetProfileImageUri -> {
                val newProfileImageUrlState = _state.value.copy(profileImageUri = intent.newProfileImageUri)
                _state.value = newProfileImageUrlState
            }
            is NavigateToPrev -> {
                ...
            }
            is ChangeStep -> {
                val newStepState = _state.value.copy(currentStep = intent.stepNum)
                _state.value = newStepState
            }
            is ClickSubmitButton -> {
                ...
            }
        }
    }
}

handleIntent

handleIntent라는 함수를 선언하고 intent를 파라미터로 받을 수 있도록 설정, intent의 타입은 intent파일에서 앞서 정의한 SignUpClientIntent 클래스다.

view에서 viewModel.handleIntent({상위 클래스}.{상속받은 하위 클래스})로 호출한다.

// ui/sign_up/sign_up_client/SignUpClientScreeen
        ...
        onClickBackIcon = { viewModel.handleIntent(SignUpClientIntent.NavigateToPrev) },
        ...

when에서 각 동작별로 경우를 나눠서 동작을 설정할 수 있다

sealed class로 했기 때문에 모든 하위 클래스들을 조건에 걸어줬는지 검사해준다

state 변경

mvi 패턴에서 state 객체는 불변함을 유지해야한다. 그렇기 때문에

// don`t
is SetNickname -> {
    _state.value.nickname = intent.newNickname
}

처럼 속성에 접근해서 변경하는 것이 아닌

// do
is SetNickname -> {
    _state.update{ it.copy(nichname = intent.newNickname) }
}

이렇게 수정하고자 하는 속성을 변경한 복제된 전체 state 객체를 만든후 전체 state를 바꾸어준다.

state를 data class로 선언했기 때문에 .copy()와 같은 메소드를 사용할 수 있다.

사이드 이펙트 정의

package com.hm.picplz.ui.screen.sign_up.sign_up_client

import android.net.Uri

sealed class SignUpClientSideEffect {
    data class SubmitProfileInfo(
        val nickname: String,
        val profileImageUrl: Uri?,
    ) : SignUpClientSideEffect()
    data object ShowFileUploadDialog : SignUpClientSideEffect()
    data object NavigateToPrev : SignUpClientSideEffect()
}

Intent 정의할 때와 마찬가지로 전체 seal class로 전체 클래스를 정의하고 데이터 보유 여부에 따라 data class와 data object로 각 동작에 해당하는 하위 클래스들 정의

viewModel에서 Intent를 통해 사이트 이펙트 emit

package com.hm.picplz.viewmodel

import ...
class SignUpClientViewModel : ViewModel() {
    ...

    private val _sideEffect = MutableSharedFlow<SignUpClientSideEffect>()
    val sideEffect: SharedFlow<SignUpClientSideEffect> get() = _sideEffect

    fun handleIntent(intent: SignUpClientIntent) {
        when (intent) {
            is SetUserInfo -> {}
            is SetNickname -> {
                ...
            }
            is SetProfileImageUri -> {
                ...
            }
            is NavigateToPrev -> {
                viewModelScope.launch {
                    _sideEffect.emit(SignUpClientSideEffect.NavigateToPrev)
                }
            }
            is ChangeStep -> {
                ...
            }
            is ClickSubmitButton -> {
                viewModelScope.launch {
                    _sideEffect.emit(
                        SignUpClientSideEffect.SubmitProfileInfo(
                            nickname = _state.value.nickname,
                            profileImageUrl = _state.value.profileImageUri,
                        )
                    )
                }
            }
        }
    }
}

_sideEffect

타입 : MutableSharedFlow
이벤트를 emit시키고 collector들에게 전달하는 역할
비동기적으로 실행

MutableSharedFlow vs MutableStateFlow

MutableSharedFlow
- 이벤트 관리할 때 사용 flow
- 여러 event를 연속적으로 emit할 수 있다
- 단발적으로 발생하고 collector가 없는 경우 emit한 이벤트는 사라진다
- 여러 collector를 두고 event를 받게끔 할 수 있음
- replay와 buffer 설정을 통해 이벤트를 설정된 범위 내에서 다시 받을 수 있도록 관리
MutableStateFlow(state에 사용된 flow)
- 상태 관리에 주로 사용하는 flow
- 최신의 state를 유지(바뀌면 이전의 값은 유지되지 않음)
- 초기값이 필요하고, collector가 없어도 상태 존재
- 값이 변경될 때, collector들에게 최신의 state 전달

view에서 이벤트 collect해서 실행

package com.hm.picplz.ui.screen.sign_up.sign_up_client

import ...

@Composable
fun SignUpClientScreen(
    modifier: Modifier = Modifier,
    navController: NavController,
    userInfo: User = emptyUserData,
    viewModel: SignUpClientViewModel = viewModel(),
) {
    val currentState = viewModel.state.collectAsState().value

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        containerColor = MainThemeColor.White
    ) { innerPadding ->
        when (currentState.currentStep) {
            0 -> SignUpClientNicknameView(
                modifier = modifier,
                currentState = currentState,
                viewModel = viewModel,
                innerPadding = innerPadding
            )
            1 -> SignUpClientProfileImageView(
                modifier = modifier,
                currentState = currentState,
                viewModel = viewModel,
                innerPadding = innerPadding
            )
            else -> {}
        }
    }
    val context = LocalContext.current

    LaunchedEffect(Unit) {
        viewModel.sideEffect.collectLatest { sideEffect ->
            when (sideEffect) {
                is SignUpClientSideEffect.SubmitProfileInfo -> {
                    Toast.makeText(context, "가입", Toast.LENGTH_SHORT).show()
                }
                is SignUpClientSideEffect.ShowFileUploadDialog -> {}
                is SignUpClientSideEffect.NavigateToPrev -> {
                    navController.popBackStack()
                }
            }
        }
    }
}

side effect는 context, navController등 view에서 조작해야 하는 요소들을 주로 사용하는 ui 요소이기 때문에 view에서 동작을 발생시킨다 viewModel에서 sideEffect가 emit한 이벤트를 collect한다. 그리고 그 각 이벤트에 따라 실행되는 동작 코드가 작성된다.

LaunchedEffect(key값) {}

안드로이드 제트팩 compose의 composable이 생성될 때 실행되는 비동기 처리 함수 key값이 변할때마다 실행

LaunchedEffect(Unit) {
    // 실행
}

key값에 Unit(아무것도 없는 것을 의미하는 객체)을 넣을 경우 Composable이 처음 렌더링 될 때 한번만 실행된다

collectLatest

Flow를 collect하는 연산자 가장 최신 데이터를 collect, 기존 작업중일 때에도 새로운 최신 데이터가 collect되면 최신데이터에 반응 만약 특정 side-effect가 실행중인데 다른 side-effect를 실행시킬(collect할)경우 기존 작업을 취소하고 새로운 side-effect 취소하지 않고 순차적으로 실행하고자 할 때는 collect 사용

참고 링크

https://android.googlesource.com/platform/frameworks/support/+/androidx-main/compose/docs/compose-api-guidelines.md

https://developer.android.com/develop/ui/compose/documentation?hl=ko

Android Architecture - Picplz/picplz-aos GitHub Wiki

안드로이드 아키텍처 및 패턴

기본 원칙

폴더 구조

MVI 패턴

장점

사이드 이펙트

적용 예시

Model 정의

data class

companion object

viewModel에서 호출

Intent 정의

sealed class

클래스 상속

data object와 data class

data {}

종합

viewmodel에서 intent 제어

handleIntent

state 변경

사이드 이펙트 정의

viewModel에서 Intent를 통해 사이트 이펙트 emit

MutableSharedFlow vs MutableStateFlow

view에서 이벤트 collect해서 실행

LaunchedEffect(key값) {}

collectLatest

참고 링크

⚠️ GitHub.com Fallback ⚠️

Android Architecture - Picplz/picplz-aos GitHub Wiki

안드로이드 아키텍처 및 패턴

기본 원칙

폴더 구조

MVI 패턴

장점

사이드 이펙트

적용 예시

Model 정의

data class

companion object

viewModel에서 호출

Intent 정의

sealed class

클래스 상속

data object와 data class

data {}

종합

viewmodel에서 intent 제어

handleIntent

state 변경

사이드 이펙트 정의

viewModel에서 Intent를 통해 사이트 이펙트 emit

MutableSharedFlow vs MutableStateFlow

view에서 이벤트 collect해서 실행

LaunchedEffect(key값) {}

collectLatest

참고 링크

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️