Jetpack Compose Tutorial 영상 정리

기존에는 Android Views를 사용하려면 XML에 UI를 선언해야 했습니다. 데이터가 변경될때마다 UI를 변경해주어야 하고 이 과정에서 오류가 많아질 수 밖에 없었습니다. 앱 시장이 성숙해짐에 따라 UI는 점점 더 요구사항이 많아지고 복잡해졌습니다. 이 과정에서 개발자는 버그가 생기지 않도록 굉장한 노력을 들이게 되었으며, 관리하기는 점점 어려워지고 있습니다.

여기서 나온 것이 Jetpack Compose 입니다. Compose는 선언적 UI라고 불리고 있는데요. 

상태를 UI로 변경하는 방식입니다. UI는 변경할 수 없고 한 번 생성하면 업데이트가 불가능합니다. 대신 앱상태가 변경되면 새로운 상태를 새로운 표현으로 변환합니다. 즉 UI 전체를 다시 생성합니다.

이렇게 되면 UI 동기화에 대한 문제가 말끔히 해결되는 것입니다. 그러나 전체 UI를 다시 생성한다면 메모리를 더 많이 사용하지 않을지 걱정이 되는데요. Compose는 똑똑하게도 변경되지 않은 요소에 대한 작업은 건너뛰게 설계되어 있습니다. 메모리 걱정없이 변경된 요소에 대한 UI만 다시 쓰기 때문에 효율적으로 동기화 문제를 해결할 수 있게 됩니다. 변경되지 않은 요소를 업데이트하지 않으면 전체가 아니라 부분만 다시 그리는게 아니냐고 물으시겠지만 구글 안드로이드에 올라온 Compose 영상을 보면 "개념적"으로는 전체를 다시 쓰는게 맞다고 합니다. A ~ Z까지 스캔하면서 변경되지 않은 부분은 뛰어넘는 것 같습니다.

UI를 Composable로 작성한 뒤에 데이터 변경이 있는 곳에서 해당 메소드를 실행하면 UI는 다시 그려집니다. 이를 Recomposing이라고 합니다. 

또한 Viewmodel과 Livedata를 통해 data를 관찰할 수 있으며 데이터가 변경될 경우 UI를 변경되도록 구현할 수 있습니다. 컴파일러가 스마트하기 때문에 입력이 변경된 Composable만 Recomposing하고 나머지는 건너뛰게 됩니다.

XML View와 달리 Composable은 기본적으로 변경할 수 없습니다. 만일 위 예제처럼 Checkbox를 만들었다면 클릭을 한다해도 true변경되지 않고 false로 유지됩니다. 그러나 당연하게도 이를 해결할 방법이 있습니다.

onCheckChange를 이용하면 상태가 변경되었을 때 값을 업데이트시킬 수 있습니다. 즉, 콜백함수를 통해 상태를 변경하지 않으면 UI는 변경되지 않는다는 것을 명심해야합니다. UI요소는 전달되는 매개변수가 완전히 통제한다는 개념이 Composable 선언적 UI의 핵심입니다. 튜토리얼에선 이것을 단일 진실 공급원이라고 말하고 있습니다. 동기화할 상태를 없애는 것이죠. 사용자가 UI를 터치하거나 드래그했을 때 어떻게 반응할지는 오로지 개발자가 결정하는 겁니다.

선언적 UI의 핵심은 특정 상태에서 UI의 형태를 완전히 설명(작성)하고 상태가 변경되면 프레임워크에서 UI업데이트를 처리하는 것입니다. 

Compose는 단방향 data flow를 따르는 아키텍처와 잘 맞는데요. 대표적으로 viewmodel / livedata가 있습니다. Viewmodel이 화면상태의 단일 스트림을 노출하면 Compose UI에서 관찰을 하고, 각 구성요소의 매개변수로 전달합니다. 이런식으로 구현하면 데이터가 변경될때만 UI가 업데이트됩니다.

Compose는 간단하면서도 강력한 레이아웃 시스템을 가지고 있습니다. 행과 열을 기본으로 하며 가로와 세로 Linear Layout과 비슷합니다. 그러나 XML View와 달리 Compose 레이아웃 모델은 여러 척도(?)를 전달 할 수 없어서 중첩된 레이아웃에 적합합니다.

하지만 새로운 Compose DSL을 적용한 ConstraintLayout을 이용하여 훨씬 복잡한 레이아웃을 만들수도 있습니다. 

또한 척도나 배치를 직접 설정하여 레이아웃을 만들고 싶다면 Layout을 사용하여 만들 수 있습니다.
(안될 것 처럼 이야기하더니 다 되네 ㅎ..)

UI에 애니메이션을 집어넣는 작업도 할 수 있습니다. Compose에 MotionLayout을 가져오는 작업도 진행중이라는데 찾아보니 이미 추가가 되어있는 듯 합니다.

이 외에도 코루틴을 이용하여 스크롤링, 제스처, 애니메이션과 같은 비동기 API를 간단히 구현할수도 있습니다. 다양한 기능을 제공하고 있고 기존 XML에서 제공했던 대부분의 기능을 사용할 수 있으므로 앞으로 점점 Compose로 대체되지 않을까 합니다. 불과 몇 년 전 개발을 시작했을 당시만 해도 JAVA로 개발을 하는 것이 당연한 느낌이었는데 이제는 Kotlin이 대세가 된 것처럼 말이죠. 새로운 기술을 빠르게 받아들이고 내 것으로 만드는 것이 개발자의 숙명이 아닐까 싶습니다.