도리안의 2025년 개발기 #102 - Jetpack Compose로 클릭 처리시, 팝업이 잠시 보이고 다시 사라지는 문제

Jetpack Compose로 클릭 처리시, 팝업이 잠시 보이고 다시 사라지는 문제

---

오늘의 개발기

프로젝트 후반인 지금은 화면 1차 개발은 마쳤고, 버그 수정을 하고 있다. 오늘 오후에는 DAY LIST 화면에서 각 DAY 항목의 STUDY 메뉴 버튼 클릭을 처리하는 코드를 수정했다.

기존 동작 (As-is)

• 학습 상태에 관계없이 학습 화면으로 바로 이동
  • 처음 클릭한 경우: 처음부터 학습 시작
  • 중간에 멈춘 경우: 중간부터 이어서 시작

To-be

• (XML로 구현된 이전 버전에서는 이미 이렇게 작동)
• 학습하지 않은 경우: 학습 화면으로 바로 이동
• 학습을 도중에 멈춘 경우
  • 이어서 학습할지 또는 처음부터 다시 학습하지 묻는 팝업 열기
  • 팝업에서 '예' 버튼을 클릭하면, 중간부터 이어서 학습
• 학습을 완료한 경우
  • 처음부터 다시 시작할지 묻는 팝업 열기

버그

To-be 구현 후, STUDY 메뉴 버튼을 클릭하면, 팝업이 잠깐 보이다가 다시 사라짐

원인

메뉴 버튼을 보여줄 MenuButton 컴포저블 함수에서 클릭을 처리할 onMenuButtonClick 파라메터의 타입을 일반 함수가 아닌 컴포저블 함수로 정한 것이 잘못 되었다. 당시에는 onMenuButtonClick을 통해 직접 UI를 업데이트하고 싶었다. 버튼 클릭 후 isClickable이 true가 되어 onMenuButtonClick 함수가 실행된다. 그러나 isClickable은 바로 다시 false가 된다. 이후 onMenuButtonClick은 실행되지 않는다. 이로 인해 그것이 보여주었던 팝업은 곧바로 다시 사라진다.

잘못된 코드 예시

@Composable
fun MenuButton(title: String, onMenuButtonClick: @Composable () -> Unit) {
    var isClickable by remember { mutableStateOf(false) }

    // 텍스트를 내용으로 하는 단순 버튼이라고 가정
    Button(onClick = { isClickable = true}) {
        Text(text = title)
    }

    if (isClickable) {
        onMenuButtonClick()
        isClickable = false
    }

}

해결 방법

• onMenuButtonClick의 @Composable 애노테이션을 삭제
• UI 직접 업데이트 대신, 상태 변경을 통해 간접적으로 UI 업데이트

이 화면을 처음 개발했던 때에는 왜 직접 업데이트가 더 유용하다고 생각을 했을까? 지금 다시 생각해봐도 이유는 지금도 잘 모르겠다. 상태 변경으로 UI를 업데이트 하는 것이 Jetpack Compose의 기본적인 원칙. 그것을 지켜야 함을 이번 버그로 다시 확인할 수 있었다.

---

지난 2025년 개발기

• #101 - 홈 화면에서 진도율이 0%만 뜨는 버그를 수정하며 배운 점
• #1 ~ #100

---

Posted through the ECblog app (https://blog.etain.club)