<div id="readability-page-1" class="page"><div><div><h2 id="b4f0" data-testid="storyTitle">popBackStack vs navigateUp</h2><div tabindex="-1" aria-hidden="false" role="tooltip"><a rel="noopener follow" href="/@hongbeomi?source=post_page---byline--c2488fd99b85---------------------------------------" data-discover="true"><div><p><img alt="hongbeom" src="https://miro.medium.com/v2/resize:fill:64:64/1*Mok6UmeBD0xatCqaYrkAUQ.png" width="32" height="32" loading="lazy" data-testid="authorPhoto"></p></div></a></div></div><p id="6548">Compose Navigation의 뒤로가기</p><figure><div role="button" tabindex="0"><p><span>Zoom image will be displayed</span></p></div><figcaption>Photo by <a href="https://unsplash.com/@howipop?utm_source=medium&amp;utm_medium=referral" rel="noopener ugc nofollow" target="_blank">The Pop'd Shop</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral" rel="noopener ugc nofollow" target="_blank">Unsplash</a></figcaption></figure><p id="1abc">Compose Navigation을 사용하여 화면 전환을 관리한다면, 백스택(back stack)에 대해 알고 계실 것입니다. 백스택은 유저가 화면을 탐색할 때 쌓이는 스택을 의미하며, 유저가 화면을 이탈한 후 이전 화면으로 돌아가고자 할 때 활용됩니다. 백스택은 앱 내에 여러 개가 존재할 수 있으며, 뒤로가기 동작을 프로그래밍 방식으로 구현하기 위해 <code>NavHostController</code>의 <code>popBackStack()</code> 함수나 <code>navigateUp()</code> 함수를 사용할 수 있습니다. 이 두 함수는 현재 백스택의 화면을 pop하여 뒤로 가기를 수행한다는 점에서 유사하지만, 특정 상황에서는 서로 다른 결과를 초래할 수 있습니다.</p><h2 id="55de">Issue</h2><figure><figcaption>B 화면에서 빠르게 popBackStack을 호출 하면 발생하는 버그</figcaption></figure><p id="4d59">예를 들어, B 화면에서 <code>popBackStack</code>을 호출하는 버튼이 있다고 가정해보겠습니다. 유저가 A 화면에서 B 화면으로 이동한 뒤, B 화면에서 해당 버튼을 빠르게 두 번 이상 누른다면, 유저는 아무것도 표시되지 않는 흰 화면을 보게 될 수 있습니다. 이는 B 화면에서 A 화면으로 전환될 때 트랜지션 애니메이션이 실행되는데, 이 과정에서 <code>popBackStack</code>이 두 번 이상 호출되면서 백스택의 엔트리 전체가 pop되기 때문입니다. 이렇게 되면 백스택을 유지할 방법이 없어집니다.</p><p id="21ad">이 문제를 해결하려면 <code>navigateUp</code>을 대신 사용하거나, <code>popBackStack</code>을 호출하는 버튼 이벤트에 delay를 추가하는 등의 대응이 필요합니다.</p><h2 id="5f76">Why?</h2><p id="0e2b">이 문제는 <code>popBackStack</code> 함수의 동작 원리에 의해 발생합니다. <code>popBackStack</code>과 <code>navigateUp</code>은 각각 아래와 같은 특징을 가지고 있습니다.</p><ul><li id="148c"><code><strong>popBackStack</strong></code><strong> : </strong>백스택 큐를 확인한 뒤, 비어 있지 않다면 내부적으로 해당 백스택의 pop 동작을 수행합니다. 하지만 <strong>현재 백스택 상태를 인지하지 못하기 때문에</strong>, 위와 같은 상황에서 불안정한 동작을 보일 수 있습니다.</li></ul><pre><span id="b275">@MainThread<br>public open fun popBackStack(): Boolean {<br>    return if (backQueue.isEmpty()) {<br>        // 백스택 큐를 확인<br>        false<br>    } else {<br>        // 내부적으로 pop 동작 수행<br>        popBackStack(currentDestination!!.id, true)<br>    }<br>}</span></pre><ul><li id="3b8a"><code><strong>navigateUp</strong></code><strong> : </strong><code>popBackStack</code>과 달리 현재 백스택을 인지하고, 스택의 맨 위에 있는 화면만 pop합니다. 이 함수는 빠르게 두 번 호출되더라도 동일한 화면이 스택의 맨 위에 존재하기 때문에 안정적인 동작을 보장합니다. 또한, <strong>현재 화면이 딥링크로 열린 경우 </strong><code><strong>navigateUp</strong></code><strong>을 호출하면 이전 앱으로 돌아가지만</strong> <code>popBackStack</code>을 호출하면 앱의 백스택으로만 이동하는 차이도 존재합니다.</li></ul><pre><span id="427e">@MainThread<br>public open fun navigateUp(): Boolean {<br>    // 백스택이 하나만 존재하는 경우, 딥링크로 인해 실행된 작업인지 체크하고 돌아가려고 시도<br>    if (destinationCountOnBackStack == 1) {<br>        val extras = activity?.intent?.extras<br>        if (extras?.getIntArray(KEY_DEEP_LINK_IDS) != null) {<br>            return tryRelaunchUpToExplicitStack()<br>        } else {<br>            return tryRelaunchUpToGeneratedStack()<br>        }<br>    } else {<br>        // 그렇지 않다면 popBackStack 호출<br>        return popBackStack()<br>    }<br>}</span></pre><p id="d7ef">공식 문서에서는 <code>popBackStack</code>이 기기 하단의 네비게이션 영역에 있는 뒤로 가기 버튼과 대응하며, <code>navigateUp</code>은 앱 바의 “&lt;-” 버튼과 대응한다고 설명하고 있습니다. 따라서 상황에 따라 적절한 API를 선택해서 의도치 않은 동작을 방지하는 것이 좋겠습니다.</p></div></div>

Stories by hongbeom on Medium

Compose Navigation의 뒤로가기
Compose Navigation을 사용하여 화면 전환을 관리한다면, 백스택(back stack)에 대해 알고 계실 것입니다. 백스택은 유저가 화면을 탐색할 때 쌓이는 스택을 의미하며, 유저가 화면을 이탈한 후 이전 화면으로 돌아가고자 할 때 활용됩니다. 백스택은 앱 내에 여러 개가 존재할 수 있으며, 뒤로가기 동작을 프로그래밍 방식으로 구현하기 위해 NavHostController의 popBackStack() 함수나 navigateUp() 함수를 사용할 수 있습니다. 이 두 함수는 현재 백스택의 화면을 pop하여 뒤로 가기를 수행한다는 점에서 유사하지만, 특정 상황에서는 서로 다른 결과를 초래할 수 있습니다.
Issue
예를 들어, B 화면에서 popBackStack을 호출하는 버튼이 있다고 가정해보겠습니다. 유저가 A 화면에서 B 화면으로 이동한 뒤, B 화면에서 해당 버튼을 빠르게 두 번 이상 누른다면, 유저는 아무것도 표시되지 않는 흰 화면을 보게 될 수 있습니다. 이는 B 화면에서 A 화면으로 전환될 때 트랜지션 애니메이션이 실행되는데, 이 과정에서 popBackStack이 두 번 이상 호출되면서 백스택의 엔트리 전체가 pop되기 때문입니다. 이렇게 되면 백스택을 유지할 방법이 없어집니다.
이 문제를 해결하려면 navigateUp을 대신 사용하거나, popBackStack을 호출하는 버튼 이벤트에 delay를 추가하는 등의 대응이 필요합니다.
Why?
이 문제는 popBackStack 함수의 동작 원리에 의해 발생합니다. popBackStack과 navigateUp은 각각 아래와 같은 특징을 가지고 있습니다.
popBackStack : 백스택 큐를 확인한 뒤, 비어 있지 않다면 내부적으로 해당 백스택의 pop 동작을 수행합니다. 하지만 현재 백스택 상태를 인지하지 못하기 때문에, 위와 같은 상황에서 불안정한 동작을 보일 수 있습니다.
@MainThread
public open fun popBackStack(): Boolean {
    return if (backQueue.isEmpty()) {
        // 백스택 큐를 확인
        false
    } else {
        // 내부적으로 pop 동작 수행
        popBackStack(currentDestination!!.id, true)
    }
}
navigateUp : popBackStack과 달리 현재 백스택을 인지하고, 스택의 맨 위에 있는 화면만 pop합니다. 이 함수는 빠르게 두 번 호출되더라도 동일한 화면이 스택의 맨 위에 존재하기 때문에 안정적인 동작을 보장합니다. 또한, 현재 화면이 딥링크로 열린 경우 navigateUp을 호출하면 이전 앱으로 돌아가지만 popBackStack을 호출하면 앱의 백스택으로만 이동하는 차이도 존재합니다.
@MainThread
public open fun navigateUp(): Boolean {
    // 백스택이 하나만 존재하는 경우, 딥링크로 인해 실행된 작업인지 체크하고 돌아가려고 시도
    if (destinationCountOnBackStack == 1) {
        val extras = activity?.intent?.extras
        if (extras?.getIntArray(KEY_DEEP_LINK_IDS) != null) {
            return tryRelaunchUpToExplicitStack()
        } else {
            return tryRelaunchUpToGeneratedStack()
        }
    } else {
        // 그렇지 않다면 popBackStack 호출
        return popBackStack()
    }
}
공식 문서에서는 popBackStack이 기기 하단의 네비게이션 영역에 있는 뒤로 가기 버튼과 대응하며, navigateUp은 앱 바의 “<-” 버튼과 대응한다고 설명하고 있습니다. 따라서 상황에 따라 적절한 API를 선택해서 의도치 않은 동작을 방지하는 것이 좋겠습니다.
추가로 Compose Navigation의 내부 동작이 궁금하시다면 아래 링크에서 확인해보실 수 있습니다.
Compose Navigation 살펴보기
참조
PL Coding - DROP TABLE
https://developer.android.com/reference/androidx/navigation/NavController#navigateUp()
https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:navigation/navigation-runtime/src/main/java/androidx/navigation/NavController.kt
popBackStack vs navigateUp was originally published in hongbeomi dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

popBackStack vs navigateUp

댓글