Kotlin | Jetpack Compose 란?

Jetpack Compose는 Android UI 개발을 위한 최신 선언적 UI 툴킷입니다. Jetpack Compose는 기존의 XML 기반 UI 개발 방식과 달리, 코틀린 코드를 사용하여 UI를 선언적(declarative)으로 작성합니다.

주요 특징

1. 선언적 UI (Declarative UI):
   • UI 상태에 따라 UI를 그리며, 상태가 변경되면 자동으로 UI를 업데이트합니다. 이는 기존의 명령형(imperative) 방식보다 직관적이고 유지보수가 용이합니다.
2. 코틀린 기반:
   • Kotlin 언어의 모든 장점을 활용할 수 있으며, 코틀린 DSL을 통해 더욱 간결하고 직관적인 UI 코드를 작성할 수 있습니다.
3. 모듈성 (Modularity):
   • UI를 작은 컴포저블 함수로 나누어 재사용성을 높이고, 큰 애플리케이션을 더 쉽게 관리할 수 있습니다.
4. 강력한 테마 및 스타일링:
   • Material Design 컴포넌트를 기본으로 제공하며, 테마와 스타일을 쉽게 적용할 수 있습니다.
5. 미리보기 기능:
   • Android Studio에서 코드 변경 사항을 실시간으로 미리볼 수 있는 기능을 제공하여, 개발 속도를 크게 향상시킵니다.

Jetpack Compose의 주요 컴포넌트

1) @Composable 애노테이션:

• 컴포저블 함수는 UI를 구성하는 기본 단위입니다. 이 함수는 상태를 기반으로 UI를 선언적으로 정의합니다.

2) 상태 관리:

• remember, mutableStateOf 등을 사용하여 상태를 관리하고, 상태 변화에 따라 UI를 자동으로 갱신합니다.

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Button(onClick = { count++ }) {
        Text(text = "Clicked $count times")
    }
}

3) 레이아웃:

• Column, Row, Box 등 다양한 레이아웃 컴포저블을 제공하여 UI 요소를 배치할 수 있습니다.

4) Material Design:

• Button, Card, TextField 등 Material Design 컴포넌트를 기본으로 제공하여 일관된 디자인을 쉽게 구현할 수 있습니다.

5) 애니메이션:

• animate* 함수와 트랜지션 API를 사용하여 쉽게 애니메이션을 추가할 수 있습니다.

 

Compose Function (구성가능한 함수)

• UI 일부를 설명합니다.
• 아무것도 반환하지 않습니다.
• 몇 개의 입력을 받아서 화면에 표시되는 내용을 생성합니다.
• @Composable 주석으로 주석 처리됩니다. 모든 컴포저블 함수에는 이 주석이 있어야 합니다. 이 주석으로 함수가 데이터를 UI로 변환하게 되어 있다는 것을 Compose 컴파일러에 알립니다. 

Compose Function 이름의 특징

• • 명사여야 함: DoneButton()
  • 동사 또는 동사구이면 안 됨: DrawTextField()
  • 명사화된 전치사이면 안 됨: TextFieldWithLink()
  • 형용사이면 안 됨: Bright()
  • 부사이면 안 됨: Outside()
  • 명사 앞에는 명사를 설명하는 형용사를 붙일 수도 있음: RoundIcon()

참고:

androidx/compose/docs/compose-api-guidelines.md at androidx-main · androidx/androidx

 

Composable  |  Android Developers

 

Jetpack Compose는 현대적인 Android UI 개발을 위한 강력하고 직관적인 툴킷입니다. 선언적 UI 패러다임을 사용하여 상태 기반 UI를 작성하며, Kotlin과의 강력한 통합을 통해 더욱 간결하고 유지보수하기 쉬운 코드를 작성할 수 있습니다. 이를 통해 개발자들은 더 생산적으로, 더 직관적인 방식으로 Android 애플리케이션을 개발할 수 있습니다.