Ch.19 컴포저블 함수 개요

1. 컴포저블 함수

= 컴포저블 = 컴포넌트

@compose

컴포저블 호출 → 앱 안에서 UI의 해당 영역이 렌더링될 때, 사용자에게 표시되고 동작되는 방식을 정의하는 데이터와 프로퍼티 집합을 전달한다.

컴포저블 함수는 데이터를 UI로 변환한다.

컴포즈 런타임으로 UI 요소를 전달하면 컴포즈 런타임을 통해 랜더링 한다.

• 컴포저블 함수에서 다른 컴포저블을 호출함으로써 컴포넌트 계층을 생성 할 수 있음
• 컴포저블 → 코틀린 표준 함수(일반함수) 호출 가능
• 코틀린 표준 함수(일반함수) → 컴포저블 호출 불가능

내장 컴포저블 + 커스텀 컴포저블을 조화해서 UI를 구성

2. 상태 컴포저블과 비상태 컴포저블

컴포저블 함수

• 상태(stateful) 컴포저블
• 비상태(stateless) 컴포저블

상태(in 컴포저블 컨택스트) =앱 실행 중 변경할 수 있는 모든 값

• ex) 슬라이더 위치값, 텍스트 필드에 입력된 문자열, 체크박스의 현재상태 등
• 상태값을 저장하려면: remember , mutablStateOf

3. 컴포저블 함수 구문

컴포저블 함수도 일반 코틀린 함수처럼 비슷하게 작성한다.

class TextScreen : ComponentActivity() {

    @Composable
    fun CustomText(text: String, fontWeight: FontWeight, color: Color) {
        Text(
            text = text,
            fontWeight = fontWeight,
            color = color
        )
    }

    @Composable
    fun CustomSwitch() {
        val checked = remember { mutableStateOf(true) }

        Column {
            Switch(
                checked = checked.value,
                onCheckedChange = { checked.value = it }
            )
            if (checked.value){
                Text("On")
            } else{
                Text("Off")
            }
        }
    }

    @Composable
    fun CustomList(items: List<String>){
        Column {
            for (item in items){
                Text(item)
                Divider(color = Color.LightGray)
            }
        }
    }

    @Preview
    @Composable
    fun DefaultPreview() {
//        CustomText(text = "helloCompose", fontWeight = FontWeight.Bold, color = Color.Cyan)
//        CustomSwitch()
        CustomList(listOf("one","two","three","for"))
    }

}

4. 파운데이션 컴포저블과 머티리얼 컴포저블

컴포즈에서 번들로 제공하는 컴포저블 분류

1. 레이아웃: 컴포넌트를 화면에 배치하고 배치된 컴포넌트들이 상호 동작하는 방법을 정의할 수있음
   1. Box
   2. BoxWithConstraints
   3. Column
   4. ConstraintLayout
   5. Row
2. 파운데이션
   1. BaseTextField
   2. Canvas
   3. Image
   4. LazyColumn
   5. LazyRow
   6. Shape
   7. Text
3. 머티리얼 디자인
   1. AlertDialog
   2. Button
   3. Card
   4. CircluarProgressIndicator
   5. DropdownMenu
   6. CheckBox
   7. FloatingActionButton
   8. LinearPregressIndicator
   9. ModelDrawer
   10. RadioButton
   11. Scaffold
   12. Slider
   13. Snackbar
   14. Switch
   15. TextField
   16. TopAppBar
   17. BottomNavigation

파운데이션 컴포넌트와 머티리얼 디자인 컴포넌트는 상호 배타적이지 않다.

5. 정리

• 컴포저블 함수는 일반함수와 달리 반환값이 없다!
• 대신에 컴포즈 런타임에 렌더링되는 UI 유닛을 반환한다
• 컴포저블 함수는 상탯값 저장여부에 따라서 상태 컴포저블 ↔ 비상태 컴포저블이 될 수 있다.
• 내장 컴포저블
  • 레이아웃
  • 파운데이션
  • 머티리얼 디자인 → 일관된 UI를 제공하기 위해서