Android Programming - Composition

안드로이드 스튜디오 개발자 페이지를 기반으로 작성됨.

https://developer.android.com/courses/pathways/android-basics-compose-unit-1-pathway-1?hl=ko

Kotlin 프로그래밍 소개  |  Android Basics Compose - First Android app  |  Android Developers

 

이번 글에서는 간단하게 JetPack Compose package를 사용하여 안드로이드 앱을 구성했을 때, UI가 빌드되는 방식에 대해서 보다 자세하게 소개해보고자 한다.

 

---

 

Compose는 composable 함수와 같은 선언형 UI를 활용하여 앱을 디자인하는 프레임워크이다. 

 

우리가 이전에 다뤘던 composable 함수와 같이 원하는 UI 및 배치에 따라서 함수를 선언하고 앱에 빌드를 시키게 되면 컴포지션이라는 데이터를 UI로 변환시키는 현상이 발생한다. 여기서 데이터는 우리가 이전에 활용한 Text Composable 함수에서 필수적인 매개변수로 활용한 string data 같은 것이다. 이러한 데이터를 사용자 인터페이스로 변환시켜주는 것이다.

 

참고로, 안드로이드 개발자 페이지에서는 컴포지션을 "Compose가 컴포저블을 실행할 때 빌드한 UI에 대한 설명입니다."  라고 표현되어 있다. 

 

---

 

Button Composable을 제외한 지금까지 실습을 진행해봤던 코드들은 모두 정적인 상태 혹은 앱과 상호작용을 할 수 없는 상태였다. 정확히 말하자면 할 수 없는 것이 아니라 하지 않는 것이라고 할 수 있겠다. 이러한 상황에서는 초기에 앱을 빌드할 때 컴포지션이 딱 한번만 일어나게 된다.

 

Button Composable을 활용하여 Click event를 구현하게 되면, 컴포지션이 한 번 일어난 이후에도 여러번 다시 바뀔 수 있는데, 이것은 컴포지션이 업데이트됨을 뜻하는 리컴포지션이 일어나는 것이다. 여러 개의 컴포지션이 생성되는 것이 아닌 초기 컴포지션을 통해 생성되고 리컴포지션을 통해서만 컴포지션이 수정될 수 있는 구조이다.

 

이렇게 리컴포지션을 하기 위해서는 Compose 프레임워크에서 추적할 상태를 알아야 한다고 한다. 즉, 클릭될 버튼을 통해 바뀔 값 같은 상태를 가지는, 변하는 것들을 추적할 수 있어야 하는 것이다. 이러한 추적되는 상태가 변할 때 리컴포지션을 예약하게 되고 composable 함수를 새로운 상태로 다시 실행시키게 된다.

 

이제 상태를 추적하는 방법에 대해서 알아보도록 하자.

Compose 프레임워크에서는 상태를 추적하기 위한 State 및 MutableState 유형을 제공하는데, State 유형은 값을 읽을수만 있는 반면에 MutableState는 값을 변경할 수 있는 관찰 가능한 유형이다. MutableState는 MutableStateOf 함수를 활용하여 만들게 되는데 만들어진 유형은 다음과 같은 특성을 지니게 된다.

 

• 상태를 보유함.
• 변경 가능한 유형으로 값을 변경할 수 있음.
• 관찰 가능한 값으로, Compose는 값의 변경을 감지하고 리컴포지션을 트리거하여 UI를 업데이트함.(Composable 함수를 새로운 상태로 실행시킴)

이제, 코드로 간단히 살펴보자.

var amountInput = mutableStateOf("0")

 

간단히 청구할 금액을 표시하는 변수를 MutableState로 만든 코드이다.

 

하지만 Button 혹은 TextField와 같이 상태를 변화시킬 수 있는 composable 함수에 대해서 위와 같이 변수를 선언하게 되면사용자가 어떤 동작을 수행해도 아마 UI가 변화되지 않을 것인데, 이는 onClick 혹은 onValueChange 등의 콜백함수가 호출되고 추적가능한 상태가 변경되므로 리컴포지션이 예약되겠지만, 리컴포지션이 트리거되면 composable 함수가 새로운 상태로 실행되기 때문에 초깃값인 0으로 다시 초기화되어 화면의 변화가 없는 것이다.

 

위와 같은 문제점을 해결하기 위해서 remember를 사용하여 리컴포지션 시 객체를 저장할 수 있다.

remember의 함수로 계산을 진행하면, 초기 컴포지션 중에 컴포지션에 저장되고 저장된 값은 리컴포지션 시 반환된다. 간단히 이야기하면 추적할 상태를 가진 함수, MutableState 혹은 State 유형의 객체를 저장할 수 있도록하여 리컴포지션을 통해 새롭게 composable이 실행되더라도 저장된 값을 불러올 수 있는 역할을 하게된다.

 

MutableState와 remember를 활용하여 객체를 초기화하는 방법에 대해서 살펴보자.

var amountInput by remember { mutableStateOf("") }

 

by는 이전 블로그에서도 다뤘듯 Kotlin 속성 위임에 해당하는 키워드이다.

 

이런식으로 객체를 선언하게 되면 어떤 변화가 생길 경우 적절히 리컴포지션 및 객체 저장을 통해 UI의 변화를 이끌어낼 수 있다.