[android] Introduction to Jetpack compose

 

Android Jetpack Compose 가 뭐야?

 

-

기존에는 Android UI Toolkit 전체가 View class 위에 build 되어 있었다.

이는 android 가 생성될 때부터 있었던 일이다.

그래서 View 를 개선하고 싶은 욕구가 있어도 처음부터 새로 만들기가 어려웠다.

 

클라이언트단에서 요구사항들이 많이 있어서 구글은 UI 에 대한 것을 처음부터 다시 구현하기로 했다.

그것이 Android Jetpack Compose lib 이다.

그리고 이것은 React, Litho, Vue, Flutter 등에서 컨셉을 차용했다.

 

 

 

1. Android Platform Release 와 함께 release 되는 것이 아니다.

 

-

기존 UI system 은 platform 에 종속적이다.

material design 이 처음 나올 때 Android 5 이상에서만 적용 가능했다.

오래된 버전은 support lib 을 사용해야 했다.

하지만 Compose lib 은 Jetpack component 로 들어가면서 platform 에 의존적이지 않게 된다.

 

 

 

2. All Kotlin API

 

-

기존에는 xml, Java/Kotlin 등을 이용해서 UI 를 만들고 control 했고, style, animation 등이 xml 형태로 UI 에 녹아들었다.

Kotlin 의 도입으로 xml 대신 선언적인 UI 를 정의하는 것이 가능해졌다.

 

 

 

3. Composable : 상속이 아닌 composition

 

-

기존에 custom UI 를 만드는 것은 쉽지 않았다.

View 를 상속해야 했고, 제대로 동작하기 위해서 많은 것들을 care 해야 했다.

TextView 의 경우 30k 라인의 코드를 가지고 있다.

그래서 내부 로직을 신경 많이 써야 한다.

하지만 Composable lib 은 compose 를 사용하기 때문에 이에 대한 고려가 많이 필요가 없어졌다.

 

 

 

4. 한 방향의 data flow

 

-

기존의 CheckBox 는 click 되면 checked = true 로 변경된다.

스스로 update 하고 listener 를 통해 이 변화를 notify 해준다.

 

그래서 앱 로직에서는, 예를 들면 ViewModel 에서는, state variable 을 두고 이 변화를 기록해두어야 했다.

이렇게 함으로써 checked state 에 대해서 2개의 복사본이 생긴다. 이는 에러를 양산해내기 쉽다.

ViewModel 의 state var 의 변화가 CheckBox 를 update 해야했고, 이는 무한 루프를 예견하기도 한다.

 

-

Compose lib 을 통해서라면 이는 쉽게 해결할 수 있다.

차이(변경)는 Compose framework 에 의해 다뤄지고, data model 은 Compose component 에 주입된다.

게다가 compose component 는 스스로 state 를 바꾸지도 않는다. 대신 listener 를 통해 노출만 한다.

state 에 대한 update role 은 app 이 가져간다.

 

 

 

5. 더 좋은 debugging

 

-

Kotlin 코드를 사용하도록 되어 있기 때문에, debugger 와 breakpoint 가 잘 작동한다.

 

 

 

* 추가 정보

 

-

Jatpack Compose 는 open source 이며 2개의 주된 컴포넌트를 가지고 있다.

하나는 Compose UI lib 이다. 이 녀석은 layout, input, text, animation, style, widget, graphics 등의 내용을 담은 UI toolkit core 이다.

둘째는 Compose compiler 로, custom Kotlin compiler plugin 이며, composable function 을 취해서 자동으로 UI hierarchy 를 update 하는 녀석이다.

 

-

composable function 을 만들기 위해서는 function 에 @Composable annotation 을 쓰면 된다.

 

 

 

참고 링크

https://bloggie.io/@_junrong/first-taste-of-android-jetpack-compose

https://developer.android.com/jetpack/compose

 

끝!