권장사항 준수

일반적인 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 ->
            // ...
        }
    }
}

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) {
            // ...
        }
    }
}

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

remember 계산 블록 내에서 참조되는 모든 입력을 항상 키로 전달하여 입력이 변경될 때 캐시된 값이 업데이트되도록 합니다. remember는 슬롯 테이블에 키와 캐시된 결과를 저장하고 모든 리컴포지션 패스에서 Object.equals()를 사용하여 키를 비교하므로, 비용이 많이 드는 계산이나 무거운 객체 할당 (예: 날짜 형식 지정 도구, 셰이더, 목록 정렬)을 캐시할 때 또는 객체 ID를 보존해야 할 때만 remember를 사용하세요.

저렴한 계산을 위해 큰 컬렉션이나 비용이 많이 드는 equals() 구현이 있는 객체를 remember의 키로 전달할 때는 주의해야 합니다. 키를 비교하는 데 직접 계산을 실행하는 것보다 더 많은 비용이 들 수 있기 때문입니다.

@Composable
fun ContactHeader(contacts: List<Contact>) {
    // Avoid: Comparing the `contacts` list with .equals() on recomposition
    // is more expensive than reading contacts.size or contacts.firstOrNull() directly.
    val firstContactName = remember(contacts) {
        contacts.firstOrNull()?.name.orEmpty()
    }
    Text(firstContactName)
}

지연 레이아웃 키 및 콘텐츠 유형 사용

지연 레이아웃은 항목을 효율적으로 재사용하므로 필요한 경우에만 항목을 재생성하거나 재구성합니다. 하지만 리컴포지션 및 슬롯 재사용을 위해 지연 레이아웃을 최적화할 수 있습니다.

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

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

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

개발자의 도움이 없으면 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)
        }
    }
}

지연 레이아웃 (LazyColumn, LazyRow, LazyGrid)을 사용할 때는 다음 가이드라인도 염두에 두세요.

  • 번들로 저장 가능한 고유 키 사용: 지연 레이아웃은 내부적으로 rememberSaveable를 사용하므로 키는 고유하고 결정적이며 Android Bundle에 저장 가능해야 합니다. Int, Long, String와 같은 기본 유형을 선호하며 목록 색인이나 hashCode()를 키로 사용하지 않습니다.
  • 이기종 목록에는 항상 contentType를 지정: contentType = { it.type }를 items 또는 itemsIndexed에 전달하여 Compose가 스크롤 중에 동일한 시각적 구조를 공유하는 항목 간에만 컴포지션 슬롯을 재사용하도록 합니다.
  • indexOf 대신 itemsIndexed 사용: items 블록 내에서 list.indexOf(item)를 호출하지 마세요. 레이아웃이 O(N²) 스캔으로 전환됩니다. 대신 itemsIndexed를 사용하세요.
  • 공유 상태 및 CompositionLocal 읽기 호이스트: 공유 Flow 인스턴스를 수집하고 지연 레이아웃 위의 상위 컴포저블에서 CompositionLocal 값 (예: LocalContext.current 또는 LocalDensity.current)을 한 번 읽은 다음 확인된 값을 항목 컴포저블에 전달합니다.
  • 작고 제한된 목록에는 Row 또는 Column 사용: 작고 정적이거나 제한된 컬렉션 (예: 1~10개 항목)의 경우 forEach가 포함된 표준 Row 또는 Column를 사용하면 지연 가상화 및 미리 가져오기 오버헤드를 방지할 수 있습니다.

computedStateOf 또는 derivedStateOf를 사용하여 리컴포지션 제한

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

val listState = rememberLazyListState()

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

val showButton = listState.firstVisibleItemIndex > 0

AnimatedVisibility(visible = showButton) {
    ScrollToTopButton()
}

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

해결 방법은 파생 상태 (또는 Compose 런타임 1.13 이상의 computedStateOf)를 사용하는 것입니다. 파생 상태를 사용하면 실제로 재구성을 트리거해야 하는 상태 변경을 Compose에 알릴 수 있습니다. 여기서는 첫 번째로 표시되는 항목이 변경되는 시점이 중요하다는 점을 지정합니다. 해당 상태 값이 변경되면 UI를 재구성해야 하지만 사용자가 아직 새 항목을 맨 위로 가져올 만큼 충분히 스크롤하지 않았다면 재구성하지 않아도 됩니다.

val listState = rememberLazyListState()

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

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

AnimatedVisibility(visible = showButton) {
    ScrollToTopButton()
}

Compose 버전 및 계산 비용에 따라 적절한 상태 파생 접근 방식을 선택합니다.

  • remember { computedStateOf { ... } } (Compose 런타임 1.13 이상): 결과를 캐시하지 않고 읽을 때마다 계산을 다시 평가하고 계산된 출력이 변경될 때만 컴포지션을 무효화합니다. 캐시 부기 및 무효화 다시 쓰기 오버헤드를 방지하므로 빠르게 변화하는 상태 (예: 스크롤 오프셋)에 의해 구동되는 기본 조건 확인 및 가벼운 파생에는 remember { computedStateOf { listState.firstVisibleItemIndex > 0 } }를 사용하는 것이 좋습니다.
  • remember { derivedStateOf { ... } }: 여러 읽기에서 계산 결과를 캐시합니다. 1.13 미만의 Compose 버전에서 또는 계산 자체가 계산 비용이 많이 들고 컴포지션 패스 중에 여러 번 읽히는 경우 derivedStateOf를 사용합니다. derivedStateOf 내에서 읽은 스냅샷 상태 값 (예: listState.firstVisibleItemIndex)을 remember 키로 전달하지 마세요. 이렇게 하면 상태가 변경될 때마다 DerivedState가 다시 생성되고 건너뛰기가 방지됩니다.
  • 일반 Kotlin getter (get()) 및 직접 속성 읽기: 무효화 감쇠가 필요하지 않은 사소한 불리언 표현식에는 일반 맞춤 getter를 사용하고 컬렉션 .size를 derivedStateOf로 래핑하는 대신 직접 읽습니다. 동기 상태 파생에 snapshotFlow와 함께 produceState를 사용하지 마세요. 불필요한 코루틴 디스패치 오버헤드가 추가되기 때문입니다.

읽기 최대한 연기

성능 문제가 식별되면 상태 읽기를 연기하는 것이 도움이 될 수 있습니다. 상태 읽기를 연기하면 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)
    ) {
        // ...
    }
}

스크롤 상태가 변경되면 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)
    ) {
        // ...
    }
}

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

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

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

이전에는 오프셋을 매개변수로 사용하는 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)
)

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

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

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

역방향 쓰기 방지

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>
}

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

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

역방향 쓰기, 리컴포지션 루프, 단계 조정에 관한 자세한 내용은 Compose의 역방향 쓰기를 참고하세요.

추가 리소스