[Android] Jetpack Compose 기초

Jetpack Compose 는 Android 를 위한 현대적인 선언현 UI 도구 키트이다.

Jetpack Compose 이전의 Android UI 는 xml로 작성되었는데, xml 파일로 UI 를 작성한 후에

findViewById() 와 같은 함수를 이용하여 트리를 탐색하고 메서드를 호출하여 노드를 변경했다.

즉, xml 파일과 .java(혹은 .kt) 등 여러 위치에서 렌더링하게 되므로 충돌이 일어나거나 두 위치 모두 업데이트 하는 것을 잊어버릴 수 있다.

xml 을 사용하여 UI 를 구성하는 방법은 다음과 같다.

 <Button
        android:id="@+id/releaseInputButton"
        android:layout_width="210dp"
        android:layout_height="48dp"
        android:layout_marginBottom="12dp"
        android:backgroundTint="@color/material_dynamic_neutral30"
        android:fontFamily="@font/nanum_square_neo"
        android:text="@string/release_release"
        app:layout_constraintBottom_toTopOf="@+id/releaseCancelButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent" />

val releaseButton: Button = findViewById(R.id.releaseInputButton)    // findViewById()를 사용하여 xml 파일에서 버튼을 가져온다
releaseButton.setOnClickListener{}    // 버튼에 setter 메소드를 이용하여 동작을 등록한다

 

이러한 방법 대신 Jetpack Compose 를 이용하면, 선언현 UI 를 사용할 수 있게 되므로 위 과정을 간소화 시킬 수 있다.

@Composable
fun Greeting(name: String){
    Text("Hello $name")
}

Jetpack Compose 함수를 사용할 때 다음과 같은 사항을 참고할 수 있다.

• 함수는 @Composable annotation 을 사용하여 지정할 수 있다.
• Composable 함수는 매개변수를 받을 수 있으며, 이 매개변수를 이용하여 UI를 구성할 수 있다.
• 예시로 함수는 Text() Composable 함수를 이용하여 텍스트를 렌더링한다.
• Composable 함수는 아무것도 반환하지 않는다.
• Composable 함수는 멱등원이며 부작용이 없다. 즉, 여러 번 호출되어도 동일한 방식으로 작동한다.