[Android] Jetpack Compose

징·2024년 2월 19일
android

Android

목록 보기
4/4

XML을 이용하여 Android UI를 개발하다 보면, 복잡한 UI를 구현하기 위해 어느새 방대하게 늘어난 코드라인을 볼 수 있다. 또한, XML과 Kotlin을 전환하며 작업하는 과정은 개발 생산성을 떨어뜨리며 불편을 낳는다. 이러한 XML의 단점을 해결하고 대체할 도구가 바로 Jetpack Compose이다.

💡Jetpack Compose

: Kotlin 언어를 사용하여 Android UI를 구축하기 위한 최신 툴킷

❓Compose를 사용하는 이유

더 적은 수의 코드, 강력한 도구, 직관적인 Kotlin API로 Android에서의 UI 개발을 간소화하고 가속화한다.

  • 코드 감소

    • Compose를 사용하면 Android View 시스템을 사용할 때보다 훨씬 적은 양의 코드로 더 다양한 작업을 수행할 수 있다. 버튼, 목록, 애니메이션 등을 구현할 때 코드 양이 현저히 줄어든다.

    • 코드를 Kotlin과 XML로 나누지 않고 Kotlin으로만 작성한다. XML과 Kotlin 간의 전환 없이 같은 언어로 코드를 작성함으로써 코드를 추적하기 더 쉽다.

    • 빌드 중인 대상을 쉽고 간단하게 유지관리할 수 있다.

  • 직관적

    • Compose는 선언적 API를 사용하며, UI를 설명하는 데 필요한 최소한의 코드만 작성하면 되므로 직관적이다.

  • 빠른 개발 과정

    • 기존의 모든 코드와 호환된다. Compose에서 Views를, Views에서 Compose 코드를 호출할 수 있다.

    • Navigation, ViewModel, Coroutine 등 대부분의 일반적인 라이브러리가 Compose와 함께 작동하여 언제든 사용 가능하다.

    • Android Studio에서 미리보기 기능을 지원하여 실시간으로 UI 변화를 확인하면서 개발할 수 있으므로 빠르게 테스트가 가능하다.

  • 강력한 성능

    • Android 플랫폼 API에 직접 액세스하고 머티리얼 디자인, 어두운 테마, 애니메이션 등을 기본적으로 지원한다.

Compose 이해

선언형 프로그래밍

선언형 프로그래밍은 UI를 직접 조작하는 대신 UI의 현재 상태를 기술하고, 상태의 변화에 따라 시스템이 자동으로 UI를 업데이트하는 접근 방식이다. 이전에는 Android에서 UI를 수동으로 조작하고 업데이트하는 방식이 일반적이었다. 그러나 이러한 방식은 복잡성과 오류 발생 가능성이 높아지는 문제가 있다.

선언형 프로그래밍은 UI 업데이트에서 발생하는 복잡성과 오류를 감소시키며, 데이터를 여러 위치에서 렌더링할 때 발생할 수 있는 문제를 최소화한다. Jetpack Compose는 선언형 UI 프레임워크의 한 예로, UI의 현재 상태를 기술하고 변경이 필요한 경우 자동으로 업데이트한다.

이러한 방식은 UI 엔지니어링을 간소화하고 코드의 가독성과 유지보수성을 향상시킨다.

Composable 함수

Compose를 사용하면 UI를 구성하기 위한 간단하고 재사용 가능한 함수(Composable 함수)를 정의할 수 있다. 예를 들어, 사용자의 이름을 받아와 인사말을 표시하는 구성 가능한 함수를 생성하는 코드를 살펴보자.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name")
}
  1. @Composable 주석으로 표시되어 있어 Compose 컴파일러에게 이 함수가 UI를 생성하는 함수임을 알린다.
  2. name이라는 매개변수를 받아와서 해당 이름을 사용하여 메시지를 생성하고, 내부에서 Text 함수를 호출하여 UI에 텍스트를 표시한다.
  3. 반환값이 없다. Composable 함수는 UI를 생성하는 데 초점을 두므로 명시적인 반환이 필요하지 않다.

동적 콘텐츠

XML이 아닌 Kotlin으로 작성되기 때문에 동적이다. 

@Composable
fun Greeting(names: List<String>) {
    for (name in names) {
        Text("Hello $name")
    }
}

위 코드는 사용자 이름 리스트로 Text UI를 구성할 때, 반복문을 통해 표시하는 함수이다. 이때 if문을 이용하여 특정 사용자 이름의 ui 표시 여부를 결정하는 등 Kotlin 코드로 동적인 작업을 수행할 수 있어 유연성을 제공한다.

재구성

Compose에서 재구성은 입력이 변경되면 Composable 함수가 다시 호출되는 프로세스를 나타낸다.

명령형 UI 모델에서 위젯을 변경하려면 위젯에서 setter를 호출하여 내부 상태를 변경한다. 그러나 Compose에서는 새 데이터를 사용하여 Composable 함수를 다시 호출하고, 변경된 부분만 재구성된다.

  • Side Effect(부수효과)
    : Composable 함수에서 자신이 아닌 외부의 State에 영향을 만드는 것
    Composable에서는 Composable의 수명 주기 및 속성으로 인해 Side Effect가 없는 것이 좋다. 예를 들어 다음 작업은 모두 Side Effect이다.

    • 공유 객체의 속성에 쓰기
    • ViewModel의 observable 업데이트
    • shared preferences 업데이트

  • Composable 함수 특징

    • Composable 함수는 순서와 관계없이 실행될 수 있다.
    • Composable 함수는 동시에 실행될 수 있다.
    • 재구성은 최대한 많은 수의 구성 가능한 함수 및 람다를 건너뛴다.
    • 재구성은 낙관적이다. (변화에 유연하다)
    • Composable 함수는 매우 자주 실행될 수 있다.

Android 공식 문서 - Compose

profile
징
깡통 채우기

0개의 댓글