[Compose] Compose Camp Pathway 1-1

Composable function 의 파라미터

Composable function 의 파라미터는 빈 Modifier 가 할당되도록 하는 것이 좋다. 함수에서 호출하는 첫번째 Composable 에 이 Modifier 를 전달하면, 이렇게 하면 구성가능한 함수 외부에서 레이아웃 과 동작을 조작할 수 있고, 필요시 MyApp 함수를 재사용하여 코드 중복을 피할 수 있다. 

// 사용 예시
MyApp(modifier = Modifier.fillMaxSize())

// 함수 
@Composable
private fun MyApp(modifier: Modifier = Modifier) {
    Surface(
        modifier = modifier,
        color = MaterialTheme.colors.background
    ) {
        Greeting(name = "Android")
    }
}

Modifier 의 overload
Modifier 는 overload 가 가능하므로 padding 을 만드는 다양항 방법을 지정할 수 있다.
Elements 에 여러 Modifier 를 추가하려면 modifier 를 . (dot) 으로 연결하면 된다. 

@Composable
private fun MyApp(
    modifier: Modifier = Modifier,
    names: List<String> = listOf("World", "Compose")
) {
    Column(modifier = modifier.padding(vertical = 10.dp)) {
        for (name in names) {
            Greeting(name = name)
        }
    }
}

@Composable
fun Greeting(name: String) {
    Surface(
        color = MaterialTheme.colors.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(all = 10.dp)
        ) {
            Text(text = "Hello, ")
            Text(text = name)
        }
    }
}

 

 

7. Compose 에서의 상태
Compose 는 Composable function 을 호출하여 데이터를 UI 로 변환한다. (Data -> UI)
데이터가 변경되면 Compose 는 새 데이터로 함수를 다시 실행하여 업데이트 된 UI 를 만든다. 이를 Recomposition 이라고 한다. 

State, MutableState 는 어떤 값을 보유하고, 그 값이 변경될 때마다 Recomposition 을 trigger 하는 API 이다.

하지만, 변수에 mutableStateOf 를 할당하기만 할 수는 없다.

Recomposition 은 어느 때고 발생할 수 있기 때문에 변경가능 한 상태를 기억해야한다.이때 remember 를 사용한다.

 

// wrong
val expanded = false 
// good
val expanded = remember { mutableStateOf(false) }

remember 는 Recomposition 을 방지하는데 사용되므로 상태가 재설정되지 않는다. 
화면의 서로 다른 부분에서 동일한 Composable function 을 호출하는 경우 자체 상태 버전을 가진 UI 요소를 만든다. 내부 상태는 클래스의 비공개 변수라고 볼 수 있다. Composable function 는 상태(State)를 자동으로 구독한다. 상태(State)가 변경되면 Recomposition 되어 UI 를 업데이트 한다.

상태를 변경하기 위해 Button 이 onClick 이라는 매개변수를 사용한다고 알고 있을 수 있지만, 값을 사용하지 않고 함수를 사용한다.

이런 방식으로 함수를 사용하는 것이 익숙하지 않을 테지만, 이는 Compose 에서 광범위하게 사용되는 매우 강력한 Kotlin 기능이다.

함수는 Kotlin 의 일급 시민이므로 변수에 할당되거나, 다른 함수로 전달될 수 있으며 그 함수에서 반환될 수 있다. 

 

- Compose 가 Kotlin 기능을 사용하는 방법

https://developer.android.com/jetpack/compose/kotlin?hl=ko#higher-order 

Jetpack Compose용 Kotlin  |  Android Developers