Compose Basic

@Composable

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

• 구성 가능한 함수
• @Composable 선언을 하면 다른 @Composable 함수를 호출할 수 있다. 
• 구성 가능한 함수는 자주 실행될 수 있고 순서와 관계없이 실행될 수 있으므로 코드가 실행되는 순서 또는 이 함수가 다시 구성되는 횟수에 의존해서는 안 된다.
• Text 또한 구성 가능한 함수이다. 

 

화면 정의

setContent {
    ComposeBasicTheme {
        // A surface container using the 'background' color from the theme
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Greeting("Android")
        }
    }
}

• setContent: 레이아웃을 정의
• ~~Theme: 테마 설정
• Surface: 배경이나 태두리 설정
• Greeting(): Surface로 실행할 함수

Compose에서 UI 단위 : 숫자.dp ex) 4.dp 

 

 

레이아웃의 3가지 요소

• Column
  • 세로배치
• Row
  • 가로배치
• Box
  • 박스 배치(겹치는 것 가능)

 

Composable 내부에 상태 추가

• mutableStateOf 함수를 사용하여 추적
• 리컴포지션: 데이터가 변경되면 Compose는 새 데이터로 이러한 함수를 다시 실행하여 업데이트된 UI를 만드는 것
• 여러 리컴포지션 간에 상태를 유지하려면 remember를 사용하여 변경 가능한 상태를 기억해야 한다.

 

상태 호스팅

• @Composabel 함수들의 공통의 상위 항목을 만드는 것
• 사용 목적: Composable을 재사용, 쉽게 테스트 가능

LazyColumn, LazyRow

• Android 뷰의 RecyclerView와 동일
• RecyclerView와 다르게 하위 요소를 재활용하지 않음