[kotlin] Jetpack Compose에서 시계 및 타이머 표시하기

Jetpack Compose는 안드로이드 앱의 사용자 인터페이스를 작성하기 위한 현대적이고 선언적인 UI 툴킷입니다. 시계나 타이머와 같은 실시간 정보를 갱신하는 UI를 만드는 것은 Jetpack Compose로 매우 쉽습니다. 여기에는 시계를 표시하고 실시간으로 갱신하는 방법을 살펴볼 것입니다.

시계 UI 만들기

먼저, 시계 UI를 만들기 위해 Text 컴포저를 사용합니다.

@Composable
fun ClockDisplay(currentTime: String) {
    Text(text = currentTime, style = TextStyle(fontSize = 24.sp))
}

위의 코드에서 ClockDisplay 함수는 Text 컴포저를 사용하여 현재 시간을 화면에 표시합니다.

실시간으로 시간 표시하기

실시간으로 시간을 표시하기 위해 LaunchedEffect를 사용할 수 있습니다. LaunchedEffect는 주어진 효과를 시작하고 태스크가 수행되는 동안 상태가 변경될 때까지 기다립니다.

@Composable
fun ClockScreen() {
    var currentTime by remember { mutableStateOf(LocalTime.now().toString()) }

    LaunchedEffect(Unit) {
        while (true) {
            delay(1000L)
            currentTime = LocalTime.now().toString()
        }
    }

    ClockDisplay(currentTime)
}

위의 코드에서 ClockScreen 함수는 LaunchedEffect를 사용하여 1초마다 현재 시간을 업데이트하고 ClockDisplay를 호출하여 실시간으로 시간을 표시합니다.

이제, Jetpack Compose를 사용하여 앱의 시계와 타이머를 손쉽게 만들 수 있습니다.

더 많은 정보를 원하시면 다음 Android 공식 문서를 참고하세요: Jetpack Compose

Happy coding!