다음 모범 사례를 따르세요.

일반적인 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 { mutableStateOf(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에서 성능을 개선하기 위한 권장사항, 라이브러리, 도구를 살펴봅니다.
• 성능 검사: 앱 성능을 검사합니다.
• 벤치마킹: 앱 성능을 벤치마킹합니다.
• 앱 시작: 앱 시작을 최적화합니다.
• 기준 프로필: 기준 프로필을 이해합니다.

추천 서비스

• 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
• 상태 및 Jetpack Compose
• 그래픽 수정자
• Compose 이해