[Android] Compose 사용 이유, 맛보기

Jetpack Compose 1.0이 출시된지 약 1년이 흘렀습니다.

XML에 Databinding을 배워 적용한지도 얼마전인 것 같은데, 금세 또 새로운 기술이 나왔네요.

XML을 사용하지 않는 새로운 패러다임이라서 많이 눈길이 갔었는데,
Compose를 사용하는 곳도 늘어나고 있는 만큼, 공식 문서의 Compose 사용 이유와 기본적인 내용을 맛보기로 정리해보면서 차차 익혀보려 합니다.

 

Compose 사용 이유

1.  코드 감소

• 코드를 Kotlin과 XML로 나누지 않고, Kotlin으로만 같은 파일에서 작성하여 코드 추적이 쉬워짐
• 코드 감소로 유지 관리가 쉬움
• Recyclerview 작성 시 Adapter가 사라져 코드가 상당히 감소함

2. 직관적

• 선언적 API 사용, 읽기 쉬움
• 특정 활동이나 프래그먼트에 종속되지 않는 작은 Stateless 구성요소를 빌드함으로, 재사용과 테스트가 쉬워짐
• 상태가 명시적이며 Composable로 전달되므로 캡슐화되고 분리됨
• 앱 상태가 변경되면 UI가 자동으로 업데이트됨

3. 강력한 성능

• 안드로이드 플랫폼 API에 직접 액세스하며 머티리얼 디자인, 다크 테마, 애니메이션 등을 기본적으로 지원
• 애니메이션을 쉽게 추가할 수 있음
• 원하는 디자인을 유연하게 구현 가능

 

Compose 기본 맛보기

표준 레이아웃 구성요소

크게 세가지의 구성요소가 있습니다.

 

Column

항목을 화면에 세로로 배치합니다.

@Composable
fun ArtistCard() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}

Row

항목을 화면에 가로로 배치합니다.

@Composable
fun ArtistCard(artist: Artist) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(/*...*/)
        Column {
            Text(artist.name)
            Text(artist.lastSeenOnline)
        }
    }
}

 

Row 내에서 하위 요소의 위치를 설정하려면 verticalAlignment 인수 설정을 하면 됩니다.

Box

요소를 다른 요소 위에 놓으려면 Box를 사용합니다.

@Composable
fun ArtistAvatar(artist: Artist) {
    Box {
        Image(/*...*/)
        Icon(/*...*/)
    }
}

수정자 사용 (Modifier)

수정자를 사용하여 컴포저블을 변경할 수 있습니다. 
수정자는 레이아웃을 맞춤설정하는 데 필수적입니다.

@Composable
fun ArtistCard(
    artist: Artist,
    onClick: () -> Unit
) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) { /*...*/ }
        Spacer(Modifier.size(padding))
        Card(elevation = 4.dp) { /*...*/ }
    }
}

그림과 같이 패딩이 생기고, clickable을 통해 사용자 입력에 반응하도록 설정할 수 있습니다.

이러한 컴포저블 함수는 재사용이 가능하여 코드 작성을 많이 단축시켜 줄 수 있다는 장점이 있습니다.
공식 문서 내용을 잠시 훑어봤지만, Jetpack Compose를 사용하여 코드를 효율적인 구조로 작성한다면 XML보다 훨씬 직관적이고, 재사용 가능하여 코드를 빠르게 작성 가능하고, 유지보수성이 훨씬 좋아질 것이라고 생각합니다.

다음번에는 직접 프로젝트에서 사용해보고 세부적인 내용으로 포스팅해보겠습니다.
감사합니다!