권장사항 준수

일반적인 Compose 실수가 발생할 수 있습니다. 이러한 실수로 인해 코드가 잘 실행되는 것처럼 보일 수 있지만 UI 성능을 저하할 수 있습니다. 권장사항에 따라 Compose에서 앱을 최적화하세요.

remember를 사용하여 비용이 많이 드는 계산 최소화

구성 가능한 함수는 애니메이션의 모든 프레임만큼 매우 자주 실행될 수 있습니다. 따라서 컴포저블의 본문에서 최대한 적은 계산을 실행해야 합니다.

중요한 기법은 계산 결과를 저장하는 것입니다 remember. 이렇게 하면 계산이 한 번 실행되고 필요할 때마다 결과를 가져올 수 있습니다.

예를 들어 다음은 정렬된 이름 목록을 표시하지만 매우 비용이 많이 드는 방식으로 정렬하는 코드입니다.

@Composable
fun ContactList(
    contacts: List<Contact>,
    comparator: Comparator<Contact>,
    modifier: Modifier = Modifier
) {
    LazyColumn(modifier) {
        // DON’T DO THIS
        items(contacts.sortedWith(comparator)) { contact ->
            // ...
        }
    }
}
PerformanceSnippets.kt

ContactsList가 재구성될 때마다 목록이 변경되지 않았더라도 전체 연락처 목록이 완전히 다시 정렬됩니다. 사용자가 목록을 스크롤하면 새 행이 표시될 때마다 컴포저블이 재구성됩니다.

이 문제를 해결하려면 목록을 LazyColumn 외부에서 정렬하고 정렬된 목록을 remember를 사용하여 저장합니다.

@Composable
fun ContactList(
    contacts: List<Contact>,
    comparator: Comparator<Contact>,
    modifier: Modifier = Modifier
) {
    val sortedContacts = remember(contacts, comparator) {
        contacts.sortedWith(comparator)
    }

    LazyColumn(modifier) {
        items(sortedContacts) {
            // ...
        }
    }
}
PerformanceSnippets.kt

이제 ContactList가 처음 구성될 때 목록이 한 번 정렬됩니다. 연락처나 비교 연산자가 변경되면 정렬된 목록이 다시 생성됩니다. 그 외에는 컴포저블이 캐시된 정렬 목록을 계속 사용할 수 있습니다.

지연 레이아웃 키 사용

지연 레이아웃은 항목을 효율적으로 재사용하며 필요한 경우에만 항목을 다시 생성하거나 재구성합니다. 하지만 재구성을 위해 지연 레이아웃을 최적화하는 데 도움이 될 수 있습니다.

사용자 작업으로 인해 항목이 목록에서 이동한다고 가정해 보겠습니다. 예를 들어 가장 최근에 수정된 메모가 맨 위에 있는 수정 시간별로 정렬된 메모 목록을 표시한다고 가정해 보겠습니다.

@Composable
fun NotesList(notes: List<Note>) {
    LazyColumn {
        items(
            items = notes
        ) { note ->
            NoteRow(note)
        }
    }
}
PerformanceSnippets.kt

하지만 이 코드에는 문제가 있습니다. 하단 부가 정보가 변경되었다고 가정해 보겠습니다. 이 메모는 이제 가장 최근에 수정되었으므로 목록의 맨 위로 이동하고 다른 모든 메모는 한 스팟 아래로 이동합니다.

개발자의 도움이 없으면 Compose는 변경되지 않은 항목이 목록에서 이동 되고 있다는 것을 인식하지 못합니다. 대신 Compose는 이전 '항목 2'가 삭제되고 항목 3, 항목 4 등에 대해 새 항목이 생성되었다고 생각합니다. 결과적으로 Compose는 실제로 변경된 항목이 하나뿐인데도 목록의 모든 항목 을 재구성합니다.

여기서 해결책은 항목 키를 제공하는 것입니다. 각 항목에 안정적인 키를 제공하면 Compose가 불필요한 재구성을 피할 수 있습니다. 이 경우 Compose는 이제 스팟 3에 있는 항목이 스팟 2에 있던 항목과 동일한 항목임을 확인할 수 있습니다. 해당 항목의 데이터가 변경되지 않았으므로 Compose는 항목을 재구성할 필요가 없습니다.

@Composable
fun NotesList(notes: List<Note>) {
    LazyColumn {
        items(
            items = notes,
            key = { note ->
                // Return a stable, unique key for the note
                note.id
            }
        ) { note ->
            NoteRow(note)
        }
    }
}
PerformanceSnippets.kt

derivedStateOf를 사용하여 재구성 제한

컴포지션에서 상태를 사용할 때의 한 가지 위험은 상태가 빠르게 변경되면 UI가 필요 이상으로 재구성될 수 있다는 점입니다. 예를 들어 스크롤 가능한 목록을 표시한다고 가정해 보겠습니다. 목록의 상태를 검사하여 목록에서 처음으로 표시되는 항목을 확인합니다.

val listState = rememberLazyListState()

LazyColumn(state = listState) {
    // ...
}

val showButton = listState.firstVisibleItemIndex > 0

AnimatedVisibility(visible = showButton) {
    ScrollToTopButton()
}
PerformanceSnippets.kt

여기서 문제는 사용자가 목록을 스크롤하면 사용자가 손가락을 드래그할 때 listState가 계속 변경된다는 점입니다. 즉, 목록이 계속 재구성됩니다. 하지만 실제로 그렇게 자주 재구성할 필요는 없습니다. 새 항목이 하단에 표시될 때까지 재구성할 필요가 없습니다. 결국 많은 추가 계산으로 인해 UI 성능이 저하됩니다.

해결책은 파생 상태를 사용하는 것입니다. 파생 상태를 사용하면 실제로 리컴포지션을 트리거해야 하는 상태 변경을 Compose에 알릴 수 있습니다. 이 경우 처음으로 표시되는 항목이 변경될 때 관심을 갖는다고 지정합니다. 해당 상태 값이 변경되면 UI를 재구성해야 하지만 사용자가 새 항목을 맨 위로 가져올 만큼 아직 스크롤하지 않은 경우 재구성할 필요가 없습니다.

val listState = rememberLazyListState()

LazyColumn(state = listState) {
    // ...
}

val showButton by remember {
    derivedStateOf {
        listState.firstVisibleItemIndex > 0
    }
}

AnimatedVisibility(visible = showButton) {
    ScrollToTopButton()
}
PerformanceSnippets.kt

읽기 최대한 연기

성능 문제가 식별되면 상태 읽기를 연기하는 것이 도움이 될 수 있습니다. 상태 읽기를 연기하면 Compose가 재구성 시 가능한 최소 코드를 다시 실행합니다. 예를 들어 UI에 컴포저블 트리에서 위로 높게 끌어올린 상태가 있고 개발자는 하위 컴포저블의 상태를 읽는 경우 람다 함수에서 상태 읽기를 래핑할 수 있습니다. 이렇게 하면 실제로 필요할 때만 읽기가 발생합니다. 참고로 Jetsnack 샘플 앱의 구현을 참고하세요. Jetsnack은 세부정보 화면에 접기 방식 툴바와 같은 효과 를 구현합니다. 이 기법이 작동하는 이유를 알아보려면 블로그 게시물 Jetpack Compose: 리컴포지션 디버깅을 참고하세요.

이 효과를 얻으려면 Title 컴포저블에서 Modifier를 사용하여 자체적으로 오프셋하기 위해 스크롤 오프셋이 필요합니다. 다음은 최적화가 이루어지기 전의 Jetsnack 코드의 간소화된 버전입니다.

@Composable
fun SnackDetail() {
    // ...

    Box(Modifier.fillMaxSize()) { // Recomposition Scope Start
        val scroll = rememberScrollState(0)
        // ...
        Title(snack, scroll.value)
        // ...
    } // Recomposition Scope End
}

@Composable
private fun Title(snack: Snack, scroll: Int) {
    // ...
    val offset = with(LocalDensity.current) { scroll.toDp() }

    Column(
        modifier = Modifier
            .offset(y = offset)
    ) {
        // ...
    }
}
PerformanceSnippets.kt

스크롤 상태가 변경되면 Compose는 가장 가까운 상위 리컴포지션 범위를 무효화합니다. 이 경우 가장 가까운 범위는 SnackDetail 컴포저블입니다. Box는 인라인 함수이므로 재구성 범위가 아닙니다. 따라서 Compose는 SnackDetail 및 SnackDetail 내의 컴포저블을 재구성합니다. 실제로 사용하는 상태만 읽도록 코드를 변경하면 재구성해야 하는 요소의 수를 줄일 수 있습니다.

@Composable
fun SnackDetail() {
    // ...

    Box(Modifier.fillMaxSize()) { // Recomposition Scope Start
        val scroll = rememberScrollState(0)
        // ...
        Title(snack) { scroll.value }
        // ...
    } // Recomposition Scope End
}

@Composable
private fun Title(snack: Snack, scrollProvider: () -> Int) {
    // ...
    val offset = with(LocalDensity.current) { scrollProvider().toDp() }
    Column(
        modifier = Modifier
            .offset(y = offset)
    ) {
        // ...
    }
}
PerformanceSnippets.kt

이제 스크롤 매개변수는 람다입니다. 즉, Title은 여전히 끌어올린 상태를 참조할 수 있지만 값은 실제로 필요한 Title 내부에서만 읽힙니다. 따라서 스크롤 값이 변경되면 가장 가까운 재구성 범위가 이제 Title 컴포저블입니다. Compose는 더 이상 전체 Box를 재구성할 필요가 없습니다.

이로써 많이 개선되었지만 더 개선할 수 있습니다. 단지 컴포저블을 다시 배치하거나 다시 그리기 위해 재구성을 발생시키는지 의심스러울 것입니다. 이 경우에는 레이아웃 단계에서 할 수 있는 Title 컴포저블의 오프셋을 변경하기만 하면 됩니다.

@Composable
private fun Title(snack: Snack, scrollProvider: () -> Int) {
    // ...
    Column(
        modifier = Modifier
            .offset { IntOffset(x = 0, y = scrollProvider()) }
    ) {
        // ...
    }
}
PerformanceSnippets.kt

이전에는 오프셋을 매개변수로 사용하는 Modifier.offset(x: Dp, y: Dp)를 코드가 사용했습니다. 람다 버전의 수정자로 전환하면 함수가 레이아웃 단계에서 스크롤 상태를 읽도록 할 수 있습니다. 따라서 스크롤 상태가 변경되면 Compose는 컴포지션 단계를 완전히 건너뛰고 레이아웃 단계로 바로 이동할 수 있습니다. 자주 변경되는 상태 변수를 수정자에 전달하는 경우 가능하면 람다 버전의 수정자를 사용해야 합니다.

다음은 이 접근 방식의 또 다른 예입니다. 이 코드는 아직 최적화되지 않았습니다.

// Here, assume animateColorBetween() is a function that swaps between
// two colors
val color by animateColorBetween(Color.Cyan, Color.Magenta)

Box(
    Modifier
        .fillMaxSize()
        .background(color)
)
PerformanceSnippets.kt

여기에서 상자의 배경색은 두 색상 간에 빠르게 전환됩니다. 따라서 이 상태는 매우 자주 변경됩니다. 그러면 컴포저블이 백그라운드 수정자에서 이 상태를 읽습니다. 결과적으로 상자는 모든 프레임에서 재구성되어야 합니다. 색상이 모든 프레임에서 변경되기 때문입니다.

이를 개선하려면 람다 기반 수정자(여기서는 drawBehind)를 사용하세요. 즉, 그리기 단계에서만 색상 상태를 읽습니다. 따라서 Compose는 컴포지션 및 레이아웃 단계를 완전히 건너뛸 수 있습니다. 색상이 변경되면 Compose는 그리기 단계로 바로 이동합니다.

val color by animateColorBetween(Color.Cyan, Color.Magenta)
Box(
    Modifier
        .fillMaxSize()
        .drawBehind {
            drawRect(color)
        }
)
PerformanceSnippets.kt

역방향 쓰기 방지

Compose에는 개발자가 이미 읽힌 상태에 쓰지 않는다는 핵심 가정이 있습니다. 쓰는 경우 역방향 쓰기라고 하며 모든 프레임에서 재구성이 끝없이 발생할 수 있습니다.

다음 컴포저블은 이러한 종류의 실수를 보여주는 예입니다.

@Composable
fun BadComposable() {
    var count by remember { mutableIntStateOf(0) }

    // Causes recomposition on click
    Button(onClick = { count++ }, Modifier.wrapContentSize()) {
        Text("Recompose")
    }

    Text("$count")
    count++ // Backwards write, writing to state after it has been read</b>
}
PerformanceSnippets.kt

이 코드는 이전 줄에서 개수를 읽은 후 컴포저블 끝에서 개수를 업데이트합니다. 이 코드를 실행하면 버튼을 클릭하여 재구성이 발생한 후 개수가 무한 루프로 빠르게 증가하는 것을 확인할 수 있습니다. Compose가 이 컴포저블을 재구성하고 오래된 상태 읽기를 확인하므로 또 다른 재구성을 예약하기 때문입니다.

컴포지션에서 상태에 쓰지 않음으로써 역방향 쓰기를 완전히 방지할 수 있습니다. 가능하다면 이전의 onClick 예와 같이 항상 이벤트에 대한 응답으로, 그리고 람다에서 상태에 씁니다.

추가 리소스

• 앱 성능 가이드: Android에서 성능을 개선하기 위한 권장사항, 라이브러리, 도구를 알아보세요.
• 성능 검사: 앱 성능을 검사합니다.
• 벤치마킹: 앱 성능을 벤치마킹합니다.
• 앱 시작: 앱 시작을 최적화합니다.
• 기준 프로필: 기준 프로필을 이해합니다.