#2 나만 헷갈렸나? Jackpot Compose 공부 중 메모들

재구성

기본값이 있는데 굳이 Modifier 인수를 전달해야 하는지 의문이 드실 수도 있습니다. 그 이유는 컴포저블이 재구성을 거칠 수 있기 때문입니다. 재구성이란 기본적으로 @Composable 메서드의 코드 블록이 다시 실행된다는 의미입니다. Modifier 객체가 코드 블록에서 만들어지면 다시 만들어질 수 있으며 이는 효율적이지 않습니다.

 

버튼을 클릭하면 Hello() 전체가 재구성되고, 그 안에 있는 DiceWithButtonAndImage()도 함께 재구성됩니다.

 

@Composable
fun Hello() {
    var count by remember { mutableStateOf(0) }
    Column {
        DiceWithButtonAndImage(modifier = Modifier.fillMaxWidth())

        Button(onClick = { count++ }) {
            Text("Click count: $count")
        }
    }
}

 

 

버튼을 클릭하면 DiceWithButtonAndImage() 만 재구성됩니다.

재구성 시 modifier는 변함 없음. 약간의 성능차이가 있음. 이 정도 수준은 인간이 느낄 수 없음. 하지만 이런것들이 쌓이면 불필요한 연산이 발생되니 최적화하는게 개발자의 역할.

@Composable
fun Hello() {
    DiceWithButtonAndImage(modifier = Modifier.fillMaxWidth())
}

@Composable 
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var count by remember { mutableStateOf(0) }

    Column {
        Button(modifier = modifier) {
            count++
        }
        Text("Click count: $count")
    }
}

 

 

fillMaxSize()
구성요소가 사용 가능한 공간을 채우도록 지정

부모가 허용한 최대 크기까지 차지

내부적으로는 fillMaxWidth().fillMaxHeight()랑 같음

wrapContentSize() 
사용 가능한 공간이 최소한 내부에 있는 구성요소만큼 커야 한다고 지정
내부의 구성요소가 사용 가능한 공간보다 작으면 Alignment 객체를 사용 가능한 공간 내에서 구성요소를 정렬

 

@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)
    )
}

 

@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier
        .fillMaxSize()
    )
}

 

 

@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier
        .wrapContentSize(Alignment.Center)
    )
}

 

@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier)
}

 

 

참조

https://developer.android.com/codelabs/basic-android-kotlin-compose-build-a-dice-roller-app

대화형 Dice Roller 앱 만들기  |  Android Developers