Jetpack Compose

Compose

Jetpack Compose는 네이티브 UI를 빌드하기 위한 Android의 최신 툴킷입니다. 더 적은 수의 코드, 강력한 도구, 직관적인 Kotlin API로 Android에서의 UI 개발을 간소화하고 가속화하여 앱에 생동감을 더해줍니다.

코드 감소

기존에 View를 사용하는 코드는 Kotlin과 XML을 나눠서 작성한다. Compose를 사용하면 Kotlin으로만 작성하기에 읽고, 이해하고, 유지보수하기에도 편리하고 코드의 양도 훨씬 줄어든다. 특히 XML 코드는 EditText 입력란이 5개가 있으면 5개의 EditText를 모두 만들어주어야 한다. 즉 재사용성이 낮다. 언어의 특성상 레이아웃이 복잡해질수록 코드의 양이 많아지고 알아보기도 어려워진다.

직관적

Compose는 선언적 API를 사용한다. UI를 설명만하면 Compose가 알아서 처리한다. Compose는 특정 액티비티나 프래그먼트에 종속되지 않는 작은 Stateless 구성요소를 빌드한다. 즉 재사용하고 테스트하기가 쉬워진다.

빠른 개발 과정

Compose는 기존 코드와 호환된다. Compose에서 Views를 Views에서 Compose 코드를 호출할 수 있다. 또한 기존에 Views를 사용하는 코드는 버튼 하나를 지울 때도 단순히 XML 파일에서 버튼을 삭제하는 것이 아니라 이와 연결된 Kotlin 코드를 모두 수정해주어야 한다. 하지만 Compose는 하나의 파일에서 Kotlin으로 작성할 수 있기에 이러한 문제를 해결한다.

강력한 성능

Compose는 Android 플랫폼 API에 직접 액세스하고 Material Design, 다크 모드, 애니메이션 등을 기본적으로 지원한다.

Composable 함수의 특징

• UI 일부를 설명한다.
• 아무것도 반환하지 않는다.
• 입력을 받아서 화면에 표시되는 내용을 생성한다.
• 여러 UI 요소를 내보낼 수도 있다.

@Composable 주석

모든 Composable 함수는 @Composable 주석이 붙는다. 이 주석을 통해 이 함수가 데이터를 UI로 변환한다는 것을 Compose 컴파일러에게 알린다.

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

Composable 함수의 이름

Composable 함수의 이름은 파스칼 표기법을 사용하며 DoneButton()과 같은 명사여야 한다.
DrawTextField() 같은 동사, 동사구 안 됨. TextFieldWithLink() 같이 명사화된 전치사 안 됨. Bright() 같은 형용사 안 됨. Outside() 같은 부사 안 됨.

Design 창 Preview

Design 창에서 미리보기 할 수 있다. 미리보기 하고자 하는 것을 @Preview 주석을 달아 작성하고, Design 창에서 확인한다.

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BasicsCodelabTheme {
        Greeting("Android")
    }
}