[Jetpack Compose] LaunchedEffect, 언제 왜 사용할까?

Compose에서의 Side-effect

Side-effect란 Composable 함수의 순서성에서 벗어나, Composition 외부의 상태를 읽거나 변경하거나, 외부와 상호작용하는 모든 행위를 의미한다. Composable은 생명주기 특성상 예측할 수 없느 시점에 Recompositon이 발생할 수 있으며, Composable의 실행 순서 역시 보장되지 않고, Recomposition 도중에 취소될 수도 있다. 이 때문에 Composable 함수는 가능하면 side-effect 없이 순수하게 UI만 선언하는 방향으로 개발하는 것이 이상적이다.

 

 

하지만 side-effect가 필요한 경우도 있다. 예를 들면 스낵바를 한 번만 표시해야 한다거나, 다음 화면으로 이동해야하는 상황과 같이 한 번만 실행되어야 하는 이벤트들이 필요할 수 있다. 이처럼 한 번만 실행되어야 하는 이벤트를 처리하기 위해서는 Composable의 생명주기를 인지하고 있는 컨트롤 가능한 환경에서 처리해야 한다.

 

State and effect use cases

Thinking in Compose 공식 문서에서 설명되어 있듯이, Composable은 side-effect가 없는 방향으로 개발하는 것이 이상적이다. 하지만 상황에 따라 UI 선언 외에 앱 상태를 변경하는 effect를 처리해야 하는 경우가 발생한다면, side-effect를 안정적으로 처리하기 위해서 Effect API들을 사용해야 한다.

 

여기서 말하는 Effect란, Ui를 직접적으로 출력하지 않는 Composable 함수로, Composition이 완료된 뒤 side-effect를 실행시키는 역할을 한다.

 

 

Compose에서 Effect는 다양한 가능성을 제공하지만, 그만큼 과도하게 사용되기 쉽다. Effect 내부에서 수행하는 작업이 반드시 UI 관련 작업인지 확인하고, Managing State 문서에서 설명하듯, 단방향 데이터 흐름(UDF)을 해치지 않도록 주의해야 한다.

LaunchedEffect: Composable의 스코프에서 suspend 함수 실행하기

@Composable
@NonRestartableComposable
fun LaunchedEffect(key1: Any?, block: suspend CoroutineScope.() -> Unit): Unit

 

Composable의 생명주기 동안 특정 작업을 수행해야 하고, 그 과정에서 suspend 함수를 호출해야 한다면 LaunchedEffect를 사용하면 된다. LaunchedEffect가 Composition에 진입하면, 파라미터로 전달된 파라미터로 전달된 코드 블록을 실행하는 Coroutine이 새로 시작된다. 그리고 LaunchedEffect가 Composition에서 제거되면 해당 Coroutine은 자동으로 취소된다.

 

 

만약 LaunchedEffect에 설정된 Key가 변경되면 Recomposition이 발생하며 기존 Coroutine은 취소되고, 새로운 suspend 함수 블록이 새 Coroutine으로 다시 실행된다.

 

 

예를 들어, 다음 코드는 지연 시간을 설정값으로 받아 알파 값을 깜빡이도록 만드는 애니메이션이다.

// Allow the pulse rate to be configured, so it can be sped up if the user is running out of time
var pulseRateMs by remember { mutableLongStateOf(3000L) }
val alpha = remember { Animatable(1f) }
LaunchedEffect(pulseRateMs) {   // Restart the effect when the pulse rate changes
    while (isActive) {
        delay(pulseRateMs)  // Pulse the alpha evey pulseRateMs to alert the user
        alpha.animateTo(0f)
        alpha.animateTo(1f)
    }
}

 

위 코드에서 애니메이션은 delay suspend 함수를 사용해 지정된 시간만큼 대기하고, 그 후 animateTo를 사용해 알파 값을 0으로, 다시 1로 순차적으로 애니메이션한다. 이 동작은 Composable이 Composition에 존재하는 동안 계속 반복된다.