[Compose] Jetpack Compose 시작하기

Jetpack Compose

- Composable
: 구성가능한 함수를 호출하여 데이터를 UI 요소로 반환하는 것

- Recomposition
: Composable 을 재실행한 후 변경사항을 업데이트 하는 것

- State / MutableState
: 변수를 관찰가능한 상태로 설정하는 것 

- Remember 
: Composable 이 재구성되어도 값을 저장 할 수 있도록 도와주는 API 

- SetContent
: setContentView 대신에 SetContent 안에 Composable 함수를 넣어 XML 대신 레이아웃을 만든다.
@Composable annotation 을 통해 Composable 함수를 만들고, 그 함수 내부에서는 TextView 를 대체하는 Composable function (Text) 으로 레이아웃을 만들 수 있다.

- Modifier 
: 상위 요소 레이아웃에서 Ui 요소가 배치되고, 표시되고, 동작하는 방식을 지정하는 것

- Compose 의 세가지 표준 Layout
: Column (세로), Row (가로), Box 

- Compose State
: MutableState, Remember, State, State hoisting
(Compose 는 state 에 따라서 UI 를 그리는 UI toolkit 이다.
변수를 사용해 어떻게 Compose UI 를 변화시키는지 알 수 있다.)

- Lazy Column, Animation
: RecyclerView => Lazy Column, Lazy Row 
Remember Saveable
Theme

---

- Recomposition, Remember 

val count: MutableState<Int> = mutableStateOf(0) // X
 
val count by remember { mutableStateOf(0) } // O

 

이 코드에 문제가 있는 이유는  Recomposition 때문이다. 
Composition 함수는 ui 를 업데이트 하기 위해 Recomposition 이라는 매커니즘 이 사용되는데 Recomposition 을 수행하는 순간 로컬 변수로 정의된 state 도 함께 초기화 된다. 때문에 Composable 함수에서는 state 만 독립적으로 사용할 수 없다. 
Composable 함수에서 state 를 정의하기 위해서는 Remember 라는 API 를 함께 써야한다.
Remember 는 object 를 메모리에 저장해놨다가 Recomposition 이 발생했을때 저장된 값을 그대로 가져오는 역할을 수행한다. 따라서 Recomposition 이 발생하더라도 state 에 있는 값은 초기화 되지 않고 유지할 수 있다. 

Activity 를 파괴하고 재생성하는 경우에는 RememberSaveable API 를 통해 state 값을 복원할 수 있다. 
Remember 를 잘 사용하면 Recomposition 으로 발생하는 비용을 줄이고 성능을 향상시킬 수 있다.