[Jetpack Compose] 1. Compose 기본 사항(1) #Composable functions

[Jetpack Compose] 1. Compose 기본 사항(1)

📌참고자료:

• Compose 기본 사항 | Android Developers
• Jetpack Compose - am I stupid or is the 'by remember {}' syntax not working properly? | reddit

Compose 이해

• Jetpack Compose: Declarative UI Framework
  • no XML, UI can entirely be described in Kotlin code
  • UI elements are functions, not objects

• State controls UI
• Events control State

• User interacts with UI element
  -> UI emits an event (ex. onClick)
  -> EventHandler decides is UI states should be changed
  -> if UI states should be changed, functions(=UI elements) re-executed
  = recomposition

Composable Functions

• annotate function(=UI elements) with @Composable annotation

• composable functions(= composables)

  • no return value, emits UI
  • no visible/invisible settings, just call composable if it needs to be displayed
  • accept parameters(= UI states)

• recomposition: when composable is re-invoked with different function parameters

  • can also happen when internal state in function changes

MutableState

• an observative type that is integrated within the Compose runtime
  • change in state -> automatically schedule recomposition for any composables that read it

• Should create within remember
  -> guarantee value is remembered, not reset when recomposed

var selectedAnswer: MutableState<Answer?> = remember{ mutableStateOf(null) }

• create within rememberSaveable
  -> guarantee value is remembered when recomposed & configuration changed

var selectedAnswer: MutableState<Answer?> = rememberSaveable{ mutableStateOf(null) }

• rememberSaveable saves state in a Bundle
  -> 크기 제한적!
  -> avoid saving heavy objects/list of objects

• create using Kotlin delegate properties

// manually add import
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

var selectedAnswer: Answer? by rememberSaveable{ mutableStateOf(null) }

Composable의 특징

• composable executions can happen in any order
  • Compose can recognize some elements are of higher priority
    -> might be drawn first

// StartScreen() -> MiddleScreen() -> EndScreen() X!!
// can happen in any order
@Composable
fun ButtonRow(){
	MyFancyNavigation{
    	StartScreen()
        MiddleScreen()
        EndScreen()
    }
}

• composables can run in parallel
  • avoid writes to a local variable in composable -> no longer side-effect free!
• recomposition skips as much as possible
  -> recompose only portions of the UI that need to be updated

// is name changes, Greeting composable will be recomposed
// Header and Footer composable will not!
@Composable
fun GreetingScreen(name:String){
	Column{
    	Header()
        Greeting(name = name)
        Footer()
    }
}

• recomposition is optimistic
  = Compose expects recompositions to be finished before the parameters change again
  -> if not finished, cancel on going recomposition & start new recomposition with new parameters
• composables might run frequently
  (ex. composable includes animation that needs to be executed every frame)
  -> make sure to make composables fast! -> avoid dropped frames