[Compose/Course] Tutorial: Jetpack Compose basics - #1 Composable functions

Android Compose 튜토리얼  |  Android 개발자  |  Android Developers

Jetpack Compose란?
-  네이티브 Android UI를 빌드하기 위한 최신 툴킷
- 적은 코드, 강력한 툴, 직관적이고 이해하기 쉬운 Kotlin API를 가지고 안드로이드 UI 개발을 간소화하고 가속화
- XML 레이아웃을 작성하거나 Layout Editor를 사용할 필요가 없음
- 원하는 요소를 명시한 Composable function을 호출하면 Compose Compiler가 나머지 작업을 알아서 진행

Lesson 1: Composable functions

Composable function이란?
- 어떻게 보여야 하는지 묘사하고, 데이터 의존성을 제공하여 프로그래밍으로 UI를 정의할 수 있음
- UI 구축 과정을 신경 쓸 필요 없음(요소 초기화, 부모에 붙이기 등)
- 함수 이름에 @Composable 어노테이션을 추가하여 만들 수 있음

Add a text element

setConent 블록은 Composable function이 호출되는 Activity의 레이아웃을 정의
Composable function은 오직 다른 Composable function에 의해서만 호출

Composable function은 Kotlin 컴파일러 플러그인을 사용하여 앱의 UI 요소로 변환됨
예를 들어, Compose UI 라이브러리에 정의된 Text Composable function은 텍스트 레이블을 화면에 표시합니다.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.Text

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello world!")
        }
    }
}

Define a composable function

Composable function은 @Composable 어노테이션을 추가하여 생성

// ...
import androidx.compose.runtime.Composable

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard("Android")
        }
    }
}

@Composable
fun MessageCard(name: String) {
    Text(text = "Hello $name!")
}

Preview your function in Ancroid Studio

@Priview 어노테이션은 별도의 앱 빌드 및 설치 없이 직접 만든 Composable function을 Android Studio에서 미리볼 수 있음
parameter를 가지고 있지 않은 composable function에만 사용 가능

// ...
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun MessageCard(name: String) {
    Text(text = "Hello $name!")
}

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard("Android")
}

Preview window에서 확인 가능
@Preview 어노테이션 표시가 있는 Composable function을 생성하여 UI 요소의 미리보기 표시