[Android] Compose 와 선언형 UI

요즘 핫한? Compose 를 사용해보고 있습니다!!!! Wow!!!!!

오랜만의 포스팅이라 두서없이 작성이 되었습니다......ㅎㅎ

 

Compose : 구성하다, 작성하다, 합성

출처 : https://en.dict.naver.com/#/search?range=all&query=compose 

네이버 영어사전

 

Comopose 를 시작하기 앞서 선언형 UI를 알아야 한다고 생각합니다.

왜냐하면 Compose 가 선언형 UI 이기 때문입니다.

 

https://play.google.com/store/apps/details?id=com.danchoo.tagalbum&hl=ko

태그앨범 - Google Play 앱

 

 

현재 선언형 UI관려된 언어, 아키텍처 등등... 많이 사용되고 있습니다.

Compose, Flutter, Swift UI, Flux, Redux, React  ... 기타 등등....

 

선언형 UI 는 웹에서 가장 활성화가 많이 되어있는 것으로 알고 있습니다.

 

Android 는 아직 Compose 에 관한 패턴, 아키텍처 같은 것들이 많이 보편화 되어있지 않습니다.

그렇기 때문에 다른 플랫폼에서는 어떻게 사용하는지 확인을 해보는 것을 추천 합니다.

 

웹에 사용하고 있는 Flux 아키텍처 관련한 내용 입니다. 

알고 지나가면 Compose 에 대한 참고가 될 수 있는 내용 입니다.

Flux는 웹에서 오래동안 사용하고 있는 선언형 UI 에 대한 아키텍처 입니다.

Compose는 정보가 별로 없기 때문에 다른 플랫폼에서 정보를 획득 했습니다. 

 

 

Flux 에서는 데이터가 단반향 으로 흐릅니다.

Compose에서 데이터가 단방향으로 처리하는 방법을 서술 할 예정입니다.

하기 내용은 Flux 구조와 데이터 흐름입니다.

간단하게만 일부 내용을 가지고 왔습니다.

자세한 내용은 출처(https://haruair.github.io/flux/docs/overview.html) 를 통해 확인 부탁 드립니다.

 

추후에 작성할 Compose의 상태관리, Compose Lifecycle , Compose MVI 패턴 포스팅에서 자세히 서술 하겠습니다.

 

Flux 구조와 데이터 흐름.

단방향 데이터 흐름은 Flux 패턴의 핵심인데 위 다이어그램은 Flux 프로그래머를 위한 제일의 멘탈 모델 이 된다. dispatcher, store과 view는 독립적인 노드로 입력과 출력이 완전히 구분된다. action은 새로운 데이터를 포함하고 있는 간단한 객체로 type 프로퍼티로 구분할 수 있다.

view는 사용자의 상호작용에 응답하기 위해 새로운 action을 만들어 시스템에 전파한다:

출처 : https://haruair.github.io/flux/docs/overview.html

Flux | Flux

 

포스팅이 산으로가고 바다로 가고 있지만 다시 목적지로.......

 

Compose 와 선언형 UI

https://developer.android.com/jetpack/compose/mental-model

Compose 이해  |  Jetpack Compose  |  Android Developers

 

android 에서 xml으로 사용했을 뷰를 재사용 하였습니다.

하지만 선언형 UI 는 뷰를 그릴때 해당 뷰를 재사용 하지 않고 다시 그리게 됩니다.

선언형 UI 는 State 라는 상태를 가지고 있습니다.

State 라는 상태를 가지기 때문에  화면 전체를 개념적으로 재생성한 후 필요한 변경사항만 적용하는 방식으로 작동합니다. 

 

 

기존 Android 명령형 UI 

Android 뷰 계층 구조는 UI 위젯의 트리로 표시할 수 있었습니다. 사용자 상호작용 등의 이유로 인해 앱의 상태가 변경되면, 현재 데이터를 표시하기 위해 UI 계층 구조를 업데이트해야 합니다.

val linearLayout = LinearLayout()

val textView = TextView().apply {
    text = "hello"
}

linearLayout.add(textView)

코드로 작성을 하지 않고 xml 으로 작성할 수 있습니다.

 

<LinearLayout ... >

    <TextView
    	....
        android:text="world"/>
</LinearLayout>

xml은 선언형 이라고 합니다?! (여태 아무 생각이 없었다고 합니다....)

하지만 xml파일에 선언했기 때문에 유동성 있는 UI 를 구성하는 것이 힘들었습니다.

https://smartstore.naver.com/happysiso

해피시소마켓 : 네이버쇼핑 스마트스토어

 

 

Compose

Compose는 처음부터 화면 전체를 개념적으로 재생성한 후 필요한 변경사항만 적용하는 방식으로 작동합니다.

화면 전체를 재생성하는 데 있어 한 가지 문제는 시간, 컴퓨팅 성능 및 배터리 사용량 측면에서 잠재적으로 비용이 많이 든다는 것입니다. 이 비용을 줄이기 위해 Compose는 특정 시점에 UI의 어떤 부분을 다시 그려야 하는지를 지능적으로 선택합니다. 

@Composable
fun TestComposable() {
   Text("compose text")
}

위와 같이 몇줄 만으로 작성이 가능합니다.

또한, xml 파일이 아닌 kt 파일에 작성이 되기 때문에 xml 보다 유동성 있게 구성이 가능합니다.

Compose 는 상속이 불가능 합니다.

하지만 상속 대신 합성을 사용합니다.

Compose 의 뜻은 구성하다. 작성하다. 합성 이라는 뜻을 가지고 있습니다.

Compose 는 여러 Composable을 합성하여 하나의 View 혹은 화면을 이루게 됩니다.

(다른 포스팅에서 전체적인 코드를 게시 하겠습니다.)

 

Compose 의 재구성

• 구성 가능한 함수는 순서와 관계없이 실행할 수 있습니다.
• 구성 가능한 함수는 동시에 실행할 수 있습니다.
• 재구성은 최대한 많은 수의 구성 가능한 함수 및 람다를 건너뜁니다.
• 재구성은 낙관적이며 취소될 수 있습니다.
• 구성 가능한 함수는 애니메이션의 모든 프레임에서와 같은 빈도로 매우 자주 실행될 수 있습니다.

 

핵심 용어

Composition

 - JetBack Compose 가 컴포저블을 실행 할때 빌드한 UI에 관한 설정

 

Initial Composition

 - 처음 컴포저블을 실행하여 컴포지션을 만듭니다.

 

Recomposition

 - 데이터가 변경될 때 컴포지션을 업데이트 하기 위해 컴포저블을 다시 실행 하는 것을 말합니다. 

출처 : https://developer.android.com/jetpack/compose/mental-model#recomposition

Compose 이해  |  Jetpack Compose  |  Android Developers

 

 

https://myseong.tistory.com/47

[Android] Compose State, Statefull, Stateless, State Hoisting

https://myseong.tistory.com/48

[Android] Compose lifecycle

https://myseong.tistory.com/49

[Android] Compose CompositionLocal