Compose UI(Composable) 생명주기

생명주기

Composable 함수

1. 초기 Composition 실행  => UI  

2. State가 변경되면 Jetpack Compose는 Recomposition을 예약

3. Composition 종료

 

 

Composable은 컴포지션을 시작하고 0회 이상 재구성되고 컴포지션을 종료

Composable의 수명 주기는 View, Activity, Frament의 수명 주기보다 간단합니다.

Composable이 수명 주기가 더 복잡한 외부 리소스를 관리하거나 이와 상호작용해야 하는 경우 Effect 를 사용해야 합니다.

 

@Composable
fun MyComposable() {
    Column {
        Text("Hello")
        Text("World")
    }
}

- Composable이 여러 번 호출(MyComposable, Column, Text, Text)되면 Composition에 여러 인스턴스가 배치됩니다.

- 색상이 다른 요소는 요소가 별도의 인스턴스

 

컴포지션 내 컴포저블의 분석

Composition안에서 Composable의 인스턴스는 호출 사이트(Composable 함수가 호출된 코드상 위치)로 식별됩니다.

Compose 컴파일러는 각 호출 사이트를 고유한 것으로 간주합니다. 여러 호출 사이트에서 컴포저블을 호출하면 컴포지션에 컴포저블의 여러 인스턴스가 생성됩니다.

@Composable
fun LoginScreen(showError: Boolean) {
    if (showError) {
        LoginError()
    }
    LoginInput() // This call site affects where LoginInput is placed in Composition
}

@Composable
fun LoginInput() { /* ... */ }

@Composable
fun LoginError() { /* ... */ }

 

상태가 변경되고 리컴포지션이 발생할 때 컴포지션 내 LoginScreen의 표현. 색상이 동일하면 재구성되지 않았음을 의미합니다.

 

LoginInput이 첫 번째로 호출후, showError변경(상태변경)에 따른 Recomposition 진행되서 두 번째로 호출되었지만, LoginInput 인스턴스는 여러번 Recomposition에 걸쳐 유지됩니다.

 

또한 LoginInput에는 Recomposition 간에 변경된 매개변수가 없으므로 Compose가 LoginInput 호출을 건너뜁니다.

 

스마트 리컴포지션에 도움이 되는 정보 추가

Composable을 여러 번 호출하면 Composable이 Composition에도 여러 번 추가됩니다.

동일한 호출 사이트에서 컴포저블을 여러 번 호출하는 경우 Compose가 각 Composable 호출을 고유하게 식별할 수 있는 정보가 없으므로 인스턴스를 구분하기 위해 호출 사이트 외에 실행 순서가 사용됩니다. 이 동작만 필요한 경우도 있지만 경우에 따라 원치 않는 동작이 발생할 수도 있습니다.

@Composable
fun MoviesScreen(movies: List<Movie>) {
    Column {
        for (movie in movies) {
            // MovieOverview composables are placed in Composition given its
            // index position in the for loop
            MovieOverview(movie)
        }
    }
}

 

영화 리스트 마지막에 새 요소가 추가된 경우 되면 컴포지션의 MovieOverview 컴포저블은 재사용할 수 있습니다. MovieOverview의 색상이 동일하면 컴포저블이 재구성되지 않았음을 의미합니다.(호출 사이트 외에 실행 순서가 사용되었기 때문이다.)

 

영화 리스트의 상단 또는 가운데에 항목을 추가하거나 항목을 삭제하거나 재정렬하여 영화 리스트이 변경되면 목록에서 입력 매개변수의 위치가 변경된 모든 MovieOverview 호출에서 리컴포지션이 발생합니다. 모두 색깔이 변하였다. 

 

 

MovieOverview가 부수 효과를 사용하여 영화 이미지를 가져오는 경우 매우 중요합니다. 효과가 적용되는 동안(네트워크를 통해 이미지를 가져오는 동안) 새로운 MovieOverview가 추가 된다면, 모든 MovieOverview 인스턴스에서 Recomposition이 발생하면 효과가 취소되고 다시 시작됩니다.

@Composable
fun MovieOverview(movie: Movie) {
    Column {
        // Side effect explained later in the docs. If MovieOverview
        // recomposes, while fetching the image is in progress,
        // it is cancelled and restarted.
        val image = loadNetworkImage(movie.url)
        MovieHeader(image)

        /* ... */
    }
}

 

Compose에서 런타임에 트리의 특정 부분(key 컴포저블)을 식별하는 데 사용할 값을 지정

key Composable을 사용하면 Compose가 컴포지션에서 컴포저블 인스턴스를 식별할 수 있습니다. 이 기능은 여러 컴포저블이 동일한 호출 사이트에서 호출되고 부수 효과 또는 내부 상태가 포함되어 있을 때 중요합니다.

@Composable
fun MoviesScreenWithKey(movies: List<Movie>) {
    Column {
        for (movie in movies) {
            key(movie.id) { // Unique ID for this movie
                MovieOverview(movie)
            }
        }
    }
}