[Android] UI 레이어

정상준·2023년 6월 21일

앱 아키텍처

목록 보기

2/3

📚 UI 레이어

UI는 데이터 레이어에서 가져온 애플리케이션 상태를 시각적으로 나타낸다.
하지만 일반적으로 데이터 레이어에서 가져오는 애플리케이션 데이터는 표시해야 하는 정보와 다른 형식이다. UI 레이어는 애플리케이션 데이터 변경사항을 UI가 표시할 수 있는 형식으로 변환한 후에 표시하는 파이프라인이다.

📚 UI 레이어 아키텍처

앱 데이터를 사용하고 UI에서 쉽게 렌더링할 수 있는 데이터로 변환합니다.
UI 렌더링 가능 데이터를 사용하고 사용자에게 표시할 UI 요소로 변환합니다.
이렇게 조합된 UI 요소의 사용자 입력 이벤트를 사용하고 입력 이벤트의 결과를 필요에 따라 UI 데이터에 반영합니다.
1~3단계를 필요한 만큼 반복합니다.

📚 UI 상태 정의

사용자가 보는 항목이 UI라면 UI 상태는 앱에서 사용자가 봐야 한다고 지정하는 항목이다. 동전의 양면과 마찬가지로 UI는 UI 상태를 시각적으로 나타낸다. UI 상태가 변경되면 변경사항이 즉시 UI에 반영된다.

📚 불변성

UI는 상태를 읽고 이에 따라 UI 요소를 업데이트하는 한 가지 역할에 집중할 수 있다.
UI State에서 데이터를 가져와 UI에 보여주는 경우 UI State를 직접 변경하면 안 된다.

📚 이름 지정 규칙

기능 + UiState

📚 단방향 데이터 흐름으로 상태 관리

📝 상태 홀더

UI 상태를 생성하는 역할을 담당하고 생성 작업에 필요한 로직을 포함하는 클래스를 상태 홀더라고 한다.
전체 화면이나 탐색 대상의 경우 일반적인 구현은 ViewModel의 인스턴스이지만 애플리케이션의 요구사항에 따라 간단한 클래스로도 충분할 수 있다.
UDF이 앱 아키텍처에 미치는 영향은 다음과 같습니다.

ViewModel이 UI에 사용될 상태를 보유하고 노출합니다. UI 상태는 ViewModel에 의해 변환된 애플리케이션 데이터
UI가 ViewModel에 사용자 이벤트를 알림
ViewModel이 사용자 작업을 처리하고 상태를 업데이트
업데이트된 상태가 렌더링할 UI에 다시 제공
상태 변경을 야기하는 모든 이벤트에 위의 작업이 반복

📝 로직의 유형

비즈니스 로직 : 앱 데이터에 대한 제품 요구사항의 구현, 비즈니스 로직은 일반적으로 도메인 또는 데이터 레이어에 배치되지만 UI 레이어에는 배치되지 않는다.

UI 로직 : 화면에 상태 변경사항을 표시하는 방법

📝 UDF를 사용하는 이유

데이터 일관성: UI용 정보 소스가 하나입니다.
테스트 가능성: 상태 소스가 분리되므로 UI와 별개로 테스트할 수 있습니다.
유지 관리성: 상태 변경은 잘 정의된 패턴을 따릅니다. 즉, 변경은 사용자 이벤트 및 데이터를 가져온 소스 모두의 영향을 받습니다.

📝 Ui State 확장 프로퍼티

data class NewsUiState(
    val isSignedIn: Boolean = false,
    val isPremium: Boolean = false,
    val newsItems: List<NewsItemUiState> = listOf()
)

val NewsUiState.canBookmarkNews: Boolean get() = isSignedIn && isPremium