[Android] Compose lifecycle

Compose lifecycle

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

컴포저블 수명 주기  |  Jetpack Compose  |  Android Developers

 

컴포지션은 초기 컴포지션을 통해서만 생성되고 리컴포지션을 통해서만 업데이트될 수 있습니다. 컴포지션을 수정하는 유일한 방법은 리컴포지션을 통하는 것입니다.

 

 

https://play.google.com/store/apps/details?id=com.danchoo.tagalbum&hl=ko

태그앨범 - Google Play 앱

 

 

 

 

https://myseong.tistory.com/47

Compose State, Statefull, Stateless, State Hoisting

 

이전 포스팅에 Compose 수명주기와 관련된 내용이 있어서 가지고 왔습니다.

 

Stateless composable 은 Recomposition이 일어나지 않을수 있습니다. 

• state 의 변경이 없을경우 화면의 재구성이 발생하지 않습니다.
• Stateless Composable Parameter 에 인자가 전달 되더라도 참조 하지 않으면 Recomposition 이 발생하지 않습니다

// Statefull comppsable
@Composable
fun StatefullComposable() {
  val textState = remember{ mutableState("변경되는 텍스트") }
  
  TextComposable(text)
  EmptyComposable(text)
  notComposableFunction(text)
}

// Stateless comppsable
// textState.value 변경 시 로그가 출력 됩니다.
// Recomposition 이 발생합니다.
@Composable
fun TextComposable(text: String) {
  Text(text)
  Log.d(TAG, "TextComposable")
}

// Stateless comppsable
// textState.value 변경 시  로그가 출력 되지 않습니다.
// Recomposition 이 발생하지 않습니다.
@Composable
fun EmptyComposable(text: String) {
  Log.d(TAG, "EmptyComposable")
}


// 일반 함수
// textState.value 변경 시  로그가 출력 됩니다.
fun notComposableFunction(text: String) {
  Log.d(TAG, "notComposableFunction")
}

 

Compose 는 State에 따라 Composition이 발생합니다.

State 가 변경되면 Recomposable 이 발생 하며, State가 변경되지 않은 Composable은 Recomposable이 발생하지 않을 수 있습니다.

또한, 전달되는 매개변수가 없을 경우 Recomposition을 생략할 수 있습니다.

 

https://smartstore.naver.com/happysiso

해피시소마켓 : 네이버쇼핑 스마트스토어

 

 

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

컴포지션 내 MyComposable의 표현. 컴포저블이 여러 번 호출되면 컴포지션에 여러 인스턴스가 배치됩니다. 색상이 다른 요소는 요소가 별도의 인스턴스임을 나타냅니다.

 

 

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

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

위의 코드 스니펫에서 LoginScreen은 LoginError 컴포저블을 조건부로 호출하며 항상 LoginInput 컴포저블을 호출합니다. 각 호출에는 고유한 호출 사이트 및 컴파일러가 호출을 고유하게 식별하는 데 사용하는 소스 위치가 있습니다.

 

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

LoginInput이 첫 번째로 호출되었다가 두 번째로 호출되었지만 LoginInput 인스턴스는 여러 리컴포지션에 걸쳐 유지됩니다. 또한 LoginInput에는 리컴포지션 간에 변경된 매개변수가 없으므로 Compose가 LoginInput 호출을 건너뜁니다.

 

하기 내용은 Column에 대한 내용 입니다.

 

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

위의 예에서 Compose는 호출 사이트 외에 실행 순서를 사용하여 컴포지션에서 인스턴스를 구분합니다. 새 movie가 목록의 하단에 추가된 경우 Compose는 인스턴스의 목록 내 위치가 변경되지 않았고 따라서 인스턴스의 movie 입력이 동일하므로 컴포지션에 이미 있는 인스턴스를 재사용할 수 있습니다.

 Column 하단에 새로운 뷰가 추가되면 추가된 View를 제외 하고 나머지 View들은 재구성 되지 않습니다.

MovieOverView에 전달되는 값이 동일하기 때문에 재구성을 생략합니다.

 

하지만 Column 첫번째에 새로운 MovieOverView가 insert 된다면 Column의 모든 아이템들이 재구성이 됩니다.

추가된 위치부터 하단 아이템들이 전부 재구성이 이루어지게 됩니다.

 

 

compose에서 런타임에 트리의 특정 부분을 식별하는 데 사용할 값을 지정할 수 있습니다.

주요 컴포저블 호출로 코드 블록을 래핑하고 하나 이상의 값을 전달하면 이러한 값이 컴포지션에서 인스턴스를 식별하는 데 함께 사용됩니다. key 값은 전체적으로 고유하지 않아도 되며 호출 사이트에서의 컴포저블 호출 간에만 고유하면 됩니다. 따라서 이 예에서 각 movie에는 movies 사이에 고유한 key가 있어야 합니다. 앱의 다른 위치에 있는 다른 컴포저블과 이 key를 공유하는 것은 괜찮습니다.

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

위에서 목록의 요소가 변경되더라도 Compose는 개별 MovieOverview 호출을 인식하고 재사용할 수 있습니다.

 

요약

• Column Bottom 에 View를 추가하면 추가된 View 만 재구성 됩니다.
• Column Top 에 View를 추가하면 모든 View가 재구성 됩니다.
• Column 순서가 변경된 모든 View에 대해 재구성 됩니다..
• Column Item 에 Key가 있다면 순서가 변경되어도 Key가 동일한 Composable 은 재구성이 되지 않습니다..

 

https://myseong.tistory.com/46

[Android] Compose 와 선언형 UI

https://myseong.tistory.com/47

[Android] Compose State, Statefull, Stateless, State Hoisting

 

https://myseong.tistory.com/49

[Android] Compose CompositionLocal