지금까지는 사용자가 버튼을 눌러야 뭔가 일어나는 코드만 봤다. 이번엔 "화면이 처음 떠날 때 자동으로 한 번 실행되는 일"을 다뤄보자. 목록 화면에 들어가면 서버 추천 할 일을 자동으로 한 번 가져오게 만들어보자.

이렇게 하면 될 것 같은데

@Composable
fun TodoListScreen(viewModel: TodoViewModel) {
    viewModel.importFromServer()  // 화면 들어오면 바로 실행?

    // ... 나머지 UI
}

컴포저블 함수 맨 위에 그냥 호출문을 적어봤다. 근데 이렇게 하면 화면에 들어올 때 한 번만 실행되는 게 아니라, 리컴포지션이 일어날 때마다 다시 실행된다. 체크박스를 하나 누르면 uiState가 바뀌어서 TodoListScreen이 다시 그려지는데, 그때마다 importFromServer()가 또 호출돼서 서버에 또 요청을 보낸다. 체크박스를 다섯 번 누르면 네트워크 요청이 다섯 번 더 나간다.

왜 이러냐면

컴포저블 함수 본문은 "화면을 어떻게 그릴지"를 기술하는 자리다. 리컴포지션될 때마다 처음부터 다시 실행되는 게 정상 동작이다. 근데 네트워크 요청 같은 건 "그릴 때마다 반복해야 하는 일"이 아니라 "특정 시점에 딱 한 번(또는 특정 조건에서만) 일어나야 하는 일"이다. 이렇게 리컴포지션의 흐름과 상관없이 "한 번만, 또는 특정 조건에서만" 일어나야 하는 일을 부수 효과(Side Effect)라고 부르고, 컴포즈는 이걸 위한 전용 도구를 따로 준다.

LaunchedEffect - 처음 한 번(또는 key가 바뀔 때)만 실행

@Composable
fun TodoListScreen(viewModel: TodoViewModel) {
    LaunchedEffect(Unit) {
        viewModel.importFromServer()
    }

    // ... 나머지 UI
}

[이미지: 목록 화면에 처음 들어왔을 때 로딩바가 한 번 뜨고, 이후 체크박스를 눌러도 다시 로딩바가 뜨지 않는 화면]

LaunchedEffect(Unit)은 "이 컴포저블이 처음 화면에 나타날 때 블록 안의 코드를 코루틴으로 한 번 실행하고, 그 이후 리컴포지션이 일어나도 다시 실행하지 않는다"는 뜻이다. 괄호 안의 Unit은 "key"라고 부르는데, 이 key 값이 바뀔 때만 블록을 다시 실행한다. Unit은 절대 안 바뀌는 값이니까 "딱 한 번만"이 되는 거다. 만약 LaunchedEffect(todoId)처럼 어떤 값을 key로 넣으면, 그 값이 바뀔 때마다(예: 다른 상세 화면으로 넘어갈 때) 다시 실행된다.

DisposableEffect - 뭔가 등록했으면 정리도 해줘야 할 때

예를 들어 화면이 떠 있는 동안만 시스템 뒤로가기를 가로채고 싶다고 해보자.

@Composable
fun TodoDetailScreen(onBack: () -> Unit) {
    val backDispatcher = LocalOnBackPressedDispatcherOwner.current?.onBackPressedDispatcher

    DisposableEffect(backDispatcher) {
        val callback = object : OnBackPressedCallback(true) {
            override fun handleOnBackPressed() {
                onBack()
            }
        }
        backDispatcher?.addCallback(callback)

        onDispose {
            callback.remove()
        }
    }

    // ... 나머지 UI
}

DisposableEffect는 LaunchedEffect랑 비슷하게 특정 시점에 코드를 실행하지만, "정리(cleanup)" 코드를 같이 받는다는 점이 다르다. 여기서는 뒤로가기 콜백을 등록(addCallback)했는데, 이 화면이 사라질 때 그 콜백을 해지(callback.remove())하지 않으면 콜백이 메모리에 계속 남아서 다른 화면에서까지 엉뚱하게 반응할 수 있다. onDispose { } 블록에 그 정리 코드를 적어두면, 이 컴포저블이 화면에서 사라지거나 key가 바뀌어서 효과가 다시 실행될 때 자동으로 호출된다.

rememberCoroutineScope - 사용자가 누를 때만 코루틴을 실행하고 싶을 때

LaunchedEffect는 컴포저블이 화면에 "떠 있는 동안"을 기준으로 자동 실행된다. 근데 버튼 클릭처럼 사용자가 직접 액션을 취했을 때만 코루틴을 실행하고 싶으면 어떻게 할까? onClick 람다는 suspend 함수가 아니라서 그 안에서 바로 delay()나 suspend fun을 호출할 수 없다.

@Composable
fun TodoListScreen(viewModel: TodoViewModel) {
    val scope = rememberCoroutineScope()
    val snackbarHostState = remember { SnackbarHostState() }

    Button(onClick = {
        scope.launch {
            snackbarHostState.showSnackbar("할 일을 추가했다")
        }
    }) {
        Text("추가")
    }
}

rememberCoroutineScope()는 "리컴포지션이 일어나도 유지되는 코루틴 스코프"를 하나 만들어준다. 이 스코프를 onClick처럼 suspend가 아닌 콜백 안에서 .launch { }로 쓰면, 그 안에서는 suspend 함수를 자유롭게 호출할 수 있다. LaunchedEffect는 "화면 생명주기에 맞춰 자동으로" 실행되고, rememberCoroutineScope는 "사용자 이벤트에 맞춰 내가 원할 때" 실행된다는 차이다.

정리

• 리컴포지션마다 반복되면 안 되는 일(네트워크 요청, 리소스 등록 등)은 컴포저블 함수 본문에 그냥 적으면 안 되고, LaunchedEffect 같은 부수 효과 API를 써야 한다
• LaunchedEffect(key)는 key가 바뀔 때만 다시 실행되고, DisposableEffect는 onDispose { }로 정리 코드까지 함께 관리한다
• 사용자 이벤트(클릭 등)에서 코루틴을 실행하려면 rememberCoroutineScope()로 받은 스코프를 쓴다

다음 글에서는 체크박스를 누를 때 배경색이 스르륵 바뀌는 것처럼, 상태 변화에 애니메이션을 입히는 방법을 보겠다.