<div id="readability-page-1" class="page"><div><div><a rel="noopener follow" href="/@hongbeomi?source=post_page-----2dd7ae69c6bb--------------------------------"><div aria-hidden="false"><img alt="hongbeom" src="https://miro.medium.com/v2/resize:fill:88:88/1*Mok6UmeBD0xatCqaYrkAUQ.png" width="44" height="44" loading="lazy"></div></a><a href="https://medium.com/hongbeomi-dev?source=post_page-----2dd7ae69c6bb--------------------------------" rel="noopener follow"><div aria-hidden="false"><img alt="hongbeomi dev" src="https://miro.medium.com/v2/resize:fill:48:48/1*RPsG8oEn86cWemnlV1GoRA.png" width="24" height="24" loading="lazy"></div></a></div>RecyclerView의 아이템으로 ComposeView를 사용해봅시다.<figure><figcaption>Photo by <a href="https://unsplash.com/@mbaumi?utm_source=medium&amp;utm_medium=referral" rel="noopener ugc nofollow" target="_blank">Mika Baumeister</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral" rel="noopener ugc nofollow" target="_blank">Unsplash</a></figcaption></figure>Compose가 등장하기 이전, 리스트 형태의 UI는 RecyclerView로 구현하는 것이 일반적인 방식이었습니다. <code>RecyclerView</code>를 사용하려면 <code>Adapter</code>, <code>ViewHolder</code> 등등 여러 가지 컴포넌트를 구현해야 했는데 Compose가 등장하면서 이런 과정 없이 리스트 형태의 UI를 구현할 수 있게 되었습니다.구글에서는 기존의 View 시스템에서 Compose로 자연스럽게 migration할 수 있도록 다양한 API를 제공하고 있습니다. 물론 RecyclerView도 그 중 하나인데요, 본 글에서는 compose-ui 버전에 따라 RecyclerView 내부 Item으로 ComposeView를 사용하는 방법에 대해 살펴보려고 합니다.<h2 id="78bc">🥲 기존의 기본 컴포지션 전략 : DisposeOnDetachedFromWindow</h2>Compose UI 1.2.0-beta02 이전에는 <code><a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/ViewCompositionStrategy" rel="noopener ugc nofollow" target="_blank">ViewCompositionStrategy</a></code>의 값에 따라 ComposeView를 dispose해야 하는 시기를 결정했으며 이 값은<code>DisposeOnDetachedFromWindow</code>로 구성되어 있었습니다. 이 경우 <code>View</code>가 윈도우에서 <code>detach</code> 될 때마다 컴포지션을 처리하게 되는데 이는 <code>RecyclerView</code>같은 <code>View</code>가 자주 분리되고 윈도우에 다시 <code>attach</code> 되는 상황. 즉, 리스트를 빠르게 스크롤 하는 경우 성능이 저하될 수 있습니다.먼저 간단한 예제를 통해 동작을 살펴보겠습니다. <code>RecyclerView</code>의 Item으로 <code>ItemRow</code>라는 뷰를 하나 구성하여 사용했습니다. (Google Sample 활용)<pre>@Composable fun ItemRow(index: Int, state: LazyListState) { DisposableEffect(Unit) { Log.v("ItemRow", "$index composed!") onDispose { Log.v("ItemRow", "$index DISPOSED!") } } Column(Modifier.fillMaxWidth()) { Text("Row #${index + 1}", Modifier.padding(horizontal = 8.dp)) LazyRow(state = state) { items(25) { colIdx -&gt; Column(Modifier.padding(8.dp).size(96.dp, 144.dp)) { Box( Modifier .fillMaxWidth() .weight(0.75f) .background(Color(0xFF999999)) ) Text("Item #$colIdx") } } } } }</pre>9번째 아이템까지 스크롤 했다가, 다시 0번째 아이템으로 스크롤 해보겠습니다.<figure></figure>총 9번의 dispose가 발생했고, 14번의 create 이벤트가 발생했습니다. 더 많은 스크롤 이벤트가 빠르게 일어났더라면 더 많은 이벤트가 발생했을 것입니다.이를 완화하기 위해 구글에서는 <code>ComposeView</code>의 컴포지션 처리를 윈도우에서 <code>detach</code> 될 때가 아닌 <code>View</code>가 재활용될 때 처리하여 향상시키는 방법을 권장하곤 했습니다. (<code>onViewReclycled</code>를 오버라이드)<pre>override fun onViewRecycled(holder: MainViewHolder) { holder.composeView.disposeComposition() }</pre>또한 <code>View</code>가 <code>detach</code>될 때 <code>ComposeView</code>가 dispose되지 않도록 하기 위해 다른 <code>ViewCompositionStrategy</code>을 지정하곤 했습니다. <code>LifecycleOwner</code>가 삭제될 때 컴포지션이 삭제되도록 <code>DisposeOnViewTreeLifecycleDestroyed</code> 을 설정하는 방법이 존재했는데요.<pre>inner class MainViewHolder( val composeView: ComposeView ) : RecyclerView.ViewHolder(composeView) { // ... init { composeView.setViewCompositionStrategy( ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed ) } // ... }</pre>위 방법을 적용한 이후 이제 다시 한 번 9번째 아이템까지 스크롤 했다가 0번째 아이템으로 스크롤 해보겠습니다.<figure></figure>총 5번의 dispose, 13번의 create 이벤트가 발생한 것을 확인할 수 있습니다. 이러한 변경 사항은 확실히 개선되었지만 바람직한 동작은 다음과 같습니다.<blockquote>composition은 새로운 데이터가 어댑터로 re-bind될 때 <code>recomposition</code>을 거쳐야 하며 composition은 <code>ComposeView</code>가 다시 사용되지 않을 것이라고 확실 할 수 있을 경우에만 삭제되어야 한다.</blockquote>더군다나 위에서 소개했던 솔루션을 사용할 경우, <code>RecyclerView</code>가 윈도우에서 분리되었지만 여전히 해당 <code>Activity</code>/<code>Fragment</code>가 활성화된 상태인 경우 컴포지션이 삭제되지 않아 불필요한 컴포지션이 생성될 수 있습니다. 결론적으로 dispose 되어야 할 때 dispose되지 않는 문제가 발생하는 것 입니다. 그래서 구글에서는 Compose의 버전을 올리며 이런 부분을 개선하고 <code>RecyclerView</code>의 동작을 개선했습니다.<h2 id="748b">😀 새로 등장한 기본 Composition 전략 이해하기 : DisposeOnDetachedFromWindowOrReleasedFromPool</h2>구글에서는 위의 문제를 해결하기 위해 Compose-ui 버전 1.2.0-beta02에서 ComposeView의 <code><a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/ViewCompositionStrategy" rel="noopener ugc nofollow" target="_blank">ViewCompositionStrategy</a></code> 에 새로운 전략인 <code><a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/ViewCompositionStrategy.DisposeOnDetachedFromWindowOrReleasedFromPool" rel="noopener ugc nofollow" target="_blank">DisposeOnDetachedFromWindowOrReleasedFromPool</a></code>을 추가했습니다.이 전략은 <code>RecyclerView</code>와 같은 pooling container의 일부가 아닌 경우, 기존의 <code>DisposeOnDetachedFromWindow</code>처럼 윈도우에서 <code>View</code>가 분리될 때 컴포지션이 자동으로 dispose됩니다. 이 pooling container에 대해서는 더 아래에서 자세히 살펴보겠습니다. <code>RecyclerView</code> 컨텍스트에서 detach된 <code>View</code>를 dispose하는 것을 방지하도록 구현되었으며, 재활용하는 타입의 아이템이 보유한 리소스를 dispose해야 할 때 소통하게 되는 pooling container의 개념이 도입되어 있습니다. 더 이상 <code>onViewRecycled</code>에서 우리가 수동으로 처리를 해줄 필요가 없게 되었습니다.⚠️ 이 새로운 전략을 사용하려면 RecyclerView 버전 1.3.0-alpha02 이상, compose-ui 버전 1.2.0-beta02 이상을 사용해야 하며 해당 라이브러리는 <code>compileSdkVersion</code> 33 이상을 요구하고 있습니다.라이브러리 버전을 업데이트한 이후, 위에서 작성했던 예제의 로그를 다시 한 번 확인해보겠습니다.<figure></figure>더 이상 불필요한 dispose, create 이벤트가 발생하지 않는 것을 확인할 수 있습니다.<h2 id="94f0">💎 PoolingContainer는 무엇인가?</h2><code>PoolingContainer</code>는 <code>androidx.customview</code>에 추가되어 있는 라이브러리이며 View 계층 외부(ex: <code>RecyclerView</code>)에서 하위 <code>View</code>의 수명 주기를 관리하는 컨테이너 내부의 하위 <code>View</code>에게 - 해당 하위 <code>View</code>가 보유한 리소스를 처분해야 하는 적절한 시기를 알려주는 callback이 포함된 라이브러리입니다.RecyclerView에서 언제, 어떻게 사용되는가?<code>RecyclerView</code>의 생성자에서 <code>PoolingContainer.setPoolingContainer</code> 메서드를 통해 사용이 시작되고 <code>RecyclerView</code>의 아래와 같은 메소드가 호출되는 상황에서 리소스를 정리하는 메소드를 호출합니다.<ul><li id="00be"><code>onDetachedFromWindow</code></li><li id="2cf7"><code>clear</code></li><li id="778e"><code>putRecycledView</code>(스크랩된 뷰홀더를 pool에 넣음) - 뷰홀더를 pool에 추가할 때 스크랩 힙의 사이즈보다 커질 경우</li><li id="4c89"><code>recycleViewHolderInternal</code> (내부적으로 뷰홀더 재활용 작업 실행) - 뷰홀더가 제거될 때</li><li id="2e24"><code>onAdapterChanged</code>(어댑터가 변경될 경우)</li><li id="4216"><code>setRecycledViewPool</code> (새로운 리사이클러뷰 풀 등록)</li></ul>자세한 구현 코드는 아래 링크에서 확인해보실 수 있습니다.<a href="https://android-review.googlesource.com/c/platform/frameworks/support/+/1875585/17/recyclerview/recyclerview/src/main/java/androidx/recyclerview/widget/RecyclerView.java#7207" rel="noopener ugc nofollow" target="_blank">RecyclerView에 PoolingContainer를 도입한 커밋</a><a href="https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:customview/customview-poolingcontainer/src/main/java/androidx/customview/poolingcontainer/PoolingContainer.kt?q=file:androidx%2Fcustomview%2Fpoolingcontainer%2FPoolingContainer.kt%20class:androidx.customview.poolingcontainer.PoolingContainerListener&amp;ss=androidx%2Fplatform%2Fframeworks%2Fsupport" rel="noopener ugc nofollow" target="_blank">PoolingContainer 구현체</a> : 소스 코드<h2 id="8570">마치며</h2>실무에서도 Compose를 점진적으로 도입하고 있는데, <code>RecyclerView</code>를 완전히 대체하는 것이 아닌 혼합하여 사용하는 모습으로 구현할 경우 위에서 소개한 라이브러리 버전에 따른 이슈가 존재하여 성능 이슈가 발생하는 것을 확인 했는데요. Compose-ui와 <code>RecyclerView</code> 라이브러리 버전 로그를 자세히 살펴보고 구현하실 때 버전에 따라서 알맞게 대처하시면 될 것 같습니다.😃<h2 id="ffc1">참고</h2><ul><li id="8d8a"><a href="https://android.googlesource.com/platform/frameworks/support/+log/1a3dcfb231517d6104969f17063fcc6c97ba6eeb..7ca43e00a517eaeeedc0a21f482b17f06e3d2181/recyclerview/recyclerview" rel="noopener ugc nofollow" target="_blank">Log — 1a3dcfb231517d6104969f17063fcc6c97ba6eeb..7ca43e00a517eaeeedc0a21f482b17f06e3d2181 — platform/frameworks/support — Git at Google</a></li><li id="e3fc"><a href="https://developer.android.com/jetpack/compose/interop/compose-in-existing-ui#compose-recyclerview" rel="noopener ugc nofollow" target="_blank">Integrating Compose with your existing UI | Jetpack Compose | Android Developers</a></li><li id="1a9c"><a rel="noopener" href="/androiddevelopers/jetpack-compose-interop-using-compose-in-a-recyclerview-569c7ec7a583">Jetpack Compose Interop: Using Compose in a RecyclerView</a></li></ul></div></div>

Stories by hongbeom on Medium

RecyclerView의 아이템으로 ComposeView를 사용해봅시다.
Compose가 등장하기 이전, 리스트 형태의 UI는 RecyclerView로 구현하는 것이 일반적인 방식이었습니다. RecyclerView를 사용하려면 Adapter, ViewHolder 등등 여러 가지 컴포넌트를 구현해야 했는데 Compose가 등장하면서 이런 과정 없이 리스트 형태의 UI를 구현할 수 있게 되었습니다.
구글에서는 기존의 View 시스템에서 Compose로 자연스럽게 migration할 수 있도록 다양한 API를 제공하고 있습니다. 물론 RecyclerView도 그 중 하나인데요, 본 글에서는 compose-ui 버전에 따라 RecyclerView 내부 Item으로 ComposeView를 사용하는 방법에 대해 살펴보려고 합니다.
🥲 기존의 기본 컴포지션 전략 : DisposeOnDetachedFromWindow
Compose UI 1.2.0-beta02 이전에는 ViewCompositionStrategy의 값에 따라 ComposeView를 dispose해야 하는 시기를 결정했으며 이 값은DisposeOnDetachedFromWindow로 구성되어 있었습니다. 이 경우 View가 윈도우에서 detach 될 때마다 컴포지션을 처리하게 되는데 이는 RecyclerView같은 View가 자주 분리되고 윈도우에 다시 attach 되는 상황. 즉, 리스트를 빠르게 스크롤 하는 경우 성능이 저하될 수 있습니다.
먼저 간단한 예제를 통해 동작을 살펴보겠습니다. RecyclerView의 Item으로 ItemRow라는 뷰를 하나 구성하여 사용했습니다. (Google Sample 활용)
@Composable
fun ItemRow(index: Int, state: LazyListState) {
    DisposableEffect(Unit) {
        Log.v("ItemRow", "$index composed!")
        onDispose {
            Log.v("ItemRow", "$index DISPOSED!")
        }
    }
    Column(Modifier.fillMaxWidth()) {
        Text("Row #${index + 1}", Modifier.padding(horizontal = 8.dp))
        LazyRow(state = state) {
            items(25) { colIdx ->
                Column(Modifier.padding(8.dp).size(96.dp, 144.dp)) {
                    Box(
                        Modifier
                            .fillMaxWidth()
                            .weight(0.75f)
                            .background(Color(0xFF999999))
                    )
                    Text("Item #$colIdx")
                }
            }
        }
    }
}
9번째 아이템까지 스크롤 했다가, 다시 0번째 아이템으로 스크롤 해보겠습니다.
총 9번의 dispose가 발생했고, 14번의 create 이벤트가 발생했습니다. 더 많은 스크롤 이벤트가 빠르게 일어났더라면 더 많은 이벤트가 발생했을 것입니다.
이를 완화하기 위해 구글에서는 ComposeView의 컴포지션 처리를 윈도우에서 detach 될 때가 아닌 View가 재활용될 때 처리하여 향상시키는 방법을 권장하곤 했습니다. (onViewReclycled를 오버라이드)
override fun onViewRecycled(holder: MainViewHolder) {
  holder.composeView.disposeComposition()
}
또한 View가 detach될 때 ComposeView가 dispose되지 않도록 하기 위해 다른 ViewCompositionStrategy을 지정하곤 했습니다. LifecycleOwner가 삭제될 때 컴포지션이 삭제되도록 DisposeOnViewTreeLifecycleDestroyed 을 설정하는 방법이 존재했는데요.
inner class MainViewHolder(
  val composeView: ComposeView
) : RecyclerView.ViewHolder(composeView) {
  // ...
  init {
    composeView.setViewCompositionStrategy(
      ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
    )
  }
  // ...
}
위 방법을 적용한 이후 이제 다시 한 번 9번째 아이템까지 스크롤 했다가 0번째 아이템으로 스크롤 해보겠습니다.
총 5번의 dispose, 13번의 create 이벤트가 발생한 것을 확인할 수 있습니다. 이러한 변경 사항은 확실히 개선되었지만 바람직한 동작은 다음과 같습니다.
composition은 새로운 데이터가 어댑터로 re-bind될 때 recomposition을 거쳐야 하며 composition은 ComposeView가 다시 사용되지 않을 것이라고 확실 할 수 있을 경우에만 삭제되어야 한다.
더군다나 위에서 소개했던 솔루션을 사용할 경우, RecyclerView가 윈도우에서 분리되었지만 여전히 해당 Activity/Fragment가 활성화된 상태인 경우 컴포지션이 삭제되지 않아 불필요한 컴포지션이 생성될 수 있습니다. 결론적으로 dispose 되어야 할 때 dispose되지 않는 문제가 발생하는 것 입니다. 그래서 구글에서는 Compose의 버전을 올리며 이런 부분을 개선하고 RecyclerView의 동작을 개선했습니다.
😀 새로 등장한 기본 Composition 전략 이해하기 : DisposeOnDetachedFromWindowOrReleasedFromPool
구글에서는 위의 문제를 해결하기 위해 Compose-ui 버전 1.2.0-beta02에서 ComposeView의 ViewCompositionStrategy 에 새로운 전략인 DisposeOnDetachedFromWindowOrReleasedFromPool을 추가했습니다.
이 전략은 RecyclerView와 같은 pooling container의 일부가 아닌 경우, 기존의 DisposeOnDetachedFromWindow처럼 윈도우에서 View가 분리될 때 컴포지션이 자동으로 dispose됩니다. 이 pooling container에 대해서는 더 아래에서 자세히 살펴보겠습니다. RecyclerView 컨텍스트에서 detach된 View를 dispose하는 것을 방지하도록 구현되었으며, 재활용하는 타입의 아이템이 보유한 리소스를 dispose해야 할 때 소통하게 되는 pooling container의 개념이 도입되어 있습니다. 더 이상 onViewRecycled에서 우리가 수동으로 처리를 해줄 필요가 없게 되었습니다.
⚠️ 이 새로운 전략을 사용하려면 RecyclerView 버전 1.3.0-alpha02 이상, compose-ui 버전 1.2.0-beta02 이상을 사용해야 하며 해당 라이브러리는 compileSdkVersion 33 이상을 요구하고 있습니다.
라이브러리 버전을 업데이트한 이후, 위에서 작성했던 예제의 로그를 다시 한 번 확인해보겠습니다.
더 이상 불필요한 dispose, create 이벤트가 발생하지 않는 것을 확인할 수 있습니다.
💎 PoolingContainer는 무엇인가?
PoolingContainer는 androidx.customview에 추가되어 있는 라이브러리이며 View 계층 외부(ex: RecyclerView)에서 하위 View의 수명 주기를 관리하는 컨테이너 내부의 하위 View에게 - 해당 하위 View가 보유한 리소스를 처분해야 하는 적절한 시기를 알려주는 callback이 포함된 라이브러리입니다.
RecyclerView에서 언제, 어떻게 사용되는가?
RecyclerView의 생성자에서 PoolingContainer.setPoolingContainer 메서드를 통해 사용이 시작되고 RecyclerView의 아래와 같은 메소드가 호출되는 상황에서 리소스를 정리하는 메소드를 호출합니다.
onDetachedFromWindow
clear
putRecycledView(스크랩된 뷰홀더를 pool에 넣음) - 뷰홀더를 pool에 추가할 때 스크랩 힙의 사이즈보다 커질 경우
recycleViewHolderInternal (내부적으로 뷰홀더 재활용 작업 실행) - 뷰홀더가 제거될 때
onAdapterChanged(어댑터가 변경될 경우)
setRecycledViewPool (새로운 리사이클러뷰 풀 등록)
자세한 구현 코드는 아래 링크에서 확인해보실 수 있습니다.
RecyclerView에 PoolingContainer를 도입한 커밋
PoolingContainer 구현체 : 소스 코드
마치며
실무에서도 Compose를 점진적으로 도입하고 있는데, RecyclerView를 완전히 대체하는 것이 아닌 혼합하여 사용하는 모습으로 구현할 경우 위에서 소개한 라이브러리 버전에 따른 이슈가 존재하여 성능 이슈가 발생하는 것을 확인 했는데요. Compose-ui와 RecyclerView 라이브러리 버전 로그를 자세히 살펴보고 구현하실 때 버전에 따라서 알맞게 대처하시면 될 것 같습니다.😃
참고
Log — 1a3dcfb231517d6104969f17063fcc6c97ba6eeb..7ca43e00a517eaeeedc0a21f482b17f06e3d2181 — platform/frameworks/support — Git at Google
Integrating Compose with your existing UI | Jetpack Compose | Android Developers
Jetpack Compose Interop: Using Compose in a RecyclerView
RecyclerView 아이템으로 ComposeView사용하기 was originally published in hongbeomi dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

RecyclerView 아이템으로 ComposeView사용하기

댓글