[Compose] Compose의 LifeCycle

⭐️ Smart Recomposition

- composition 함수에서 사용되는 데이터가 변경된 데이터의 함수만 재호출 즉 일부분의 ui만 업데이트 

- 성능 최적화 

 

 

Compose의 Lifecycle

 

https://developer.android.com/develop/ui/compose/lifecycle?hl=ko

- composition : 컴포저블 함수가 호출되어 UI 트리를 구성하는 과정으로 여러 개의 컴포저블이 결합되어 최종 UI 생성, 즉 초기 UI를 설정하는 단계

- recomposition : 상태가 변경되어 UI가 다시 그려지는 과정, 상태 변화를 감지하고 영향을 받는 부분만 업데이트 (최적화 하는 것이 제일 중요)

- disposal : composable이 소멸, 리소스 해제

 

 

recomposition의 최적화를 위해서 생명주기를 아는 것이 중요합니다

 

만약 아래와 같이 코드를 사용한다고 하면, 

@Composable
fun MovieOverview(movie: Movie) {
    Column {
       //...
        val image = loadNetworkImage(movie.url)
        MovieHeader(image)

        /* ... */
    }
}

@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 호출들이 recomposition이 되어버립니다

만약 네트워크를 통해 데이터를 가져오고 있는 중이였다면  네트워크 요청이 중복 실행되거나 이전 요청이 취소되는 상황이 발생합니다 

 

이런 문제를 해결하기 위해서는

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

 

트리의 특정 부분(key 컴포저블)을 식별하는 데 사용할 값을 지정하면 됩니다 

이 key 값은 전체적으로 고유하지 않아도 되며 호출 사이트에서의 컴포저블 호출 간에만 고유하면 됩니다 

 

위와 같이 특정 식별값을 준다면 어디에 추가된다고 해도  전체적으로 Recomposition 하지 않고 

compose는 개별 MovieOverview를 인식하고 재사용할 수 있습니다