TIL 64일차 - 최종프로젝트

Jetpack Compose

Jetpack Compose는 UI 개발을 단순화하도록 설계된 최신 툴킷으로, 간결한 반응형 프로그래밍 모델과 Kotlin 프로그래밍 언어의 쉬운 사용성을 결합한다.

App은 정적인 데이터만을 표현하지 않는다. 사용자 또는 시스템 등에 의해 변화무쌍한 동적인 데이터를 표현하게 된다. 즉, 데이터가 변경되면 UI도 변경되어야 하는 경우가 대다수다. XML 레이아웃을 통해 TextView 또는 Button과 같은 UI를 만들고, 주어진 데이터를 UI에 반영하기 위해 setText(…)와 같은 명령을 개발자가 직접 입력하게 된다. 이를 명령형 프로그래밍(Imperative programming)이라 할 수 있다. 이러한 방식의 가장 큰 문제점은 UI 컴포넌트도 상태(데이터)를 가지고 있고, 개발자가 제어하는 Activity/Fragment/ViewModel 등에서 상태(데이터)를 가지고 있다는 점이다. 즉, 동등한 상태가 두개의 독립적인 상태로 존재하게 된다. 이러한 부분 때문에 초창기 안드로이드 개발방식에서는 변경된 데이터와 UI의 상태가 일치 하지 않는 문제가 종종 발생했었다. 그렇기 때문에 데이터바인딩이라는 기법을 통해 동적인 데이터와 UI 현재 상태를 일관되게 하는 프로그래밍 방식을 지금까지 고수해왔다.

 

그렇다면 Compose는 어떨까? 선언형 UI라는 것을 간단히 설명하자면, “UI는 이렇게,저렇게 구성해야 돼!” 라는 정의자체만 하고 그 뒤에 동작하는 부분은 개발자가 관여하지 않는 것을 말한다. Compose를 사용하면 개발자는 더 이상 UI를 제어하는 것에 대해 관여하지 않는다. 그저 개발자는 상태를 관리하는데 집중할 수 있게 된다. 상태에 따른 UI만 선언적으로 미리 정의하고, 현재의 상태를 Compose에게 넘겨주기만 하면된다.  데이터가 변경되면 Compose는 자동으로 다시 UI 계층 구조를 갱신하게 된다.

@Composable

Compose는 데이터를 UI 계층 구조로 변환하는 일련의 함수를 호출하여 UI를 구성하게 되는데, 이때 호출되는 함수는 @Composable이라는 애노테이션을 사용하여 선언하게 된다.

@Composable을 사용하여 선언하는 함수를 Composable 함수라고 한다. Compose는 선언한 Composable 함수를 통해 시간이 지남에 따라 UI를 갱신하고 유지 관리할 수 있도록 한다.

Composable 함수는 또 다른 Composable 함수를 호출할 수 있는데, 이러한 기능덕에 작은 UI단위로 Composable 함수를 정의하여 UI를 독립적으로 편집하고, 조합하여 전체적인 UI를 구성할 수 있게 된다.

Jetpack Compose 사용 방법

** 자세한 내용은 공식 문서를 참고한다 **

https://developer.android.com/codelabs/jetpack-compose-basics?hl=ko#0

Jetpack Compose 기초  |  Android Developers

 

Case 1 : 새로운 Project를 시작할 때

New Project에 있는 Empty Activity 템플릿을 선택한다. 그러면 프로젝트가 이미 Compose를 사용할 준비를 마친 상태로 구성하게 된다.

MainActivity에는 Compose의 가장 기본적인 코드가 쓰여있다.

Case 2 : 기존 프로젝트에 Compose를 추가하는 경우

• 앱의 build.gradle 파일에 다음 정의를 추가한다

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.13"
    }
}

• Compose 라이브러리 종속 항목의 하위 집합을 아래 블록의 종속 항목에 추가한다.

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.05.00")
    implementation(composeBom)
    androidTestImplementation(composeBom)

    // Choose one of the following:
    // Material Design 3
    implementation("androidx.compose.material3:material3")
    // or Material Design 2
    implementation("androidx.compose.material:material")
    // or skip Material Design and build directly on top of foundational components
    implementation("androidx.compose.foundation:foundation")
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation("androidx.compose.ui:ui")

    // Android Studio Preview support
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
    debugImplementation("androidx.compose.ui:ui-test-manifest")

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation("androidx.compose.material:material-icons-core")
    // Optional - Add full set of material icons
    implementation("androidx.compose.material:material-icons-extended")
    // Optional - Add window size utils
    implementation("androidx.compose.material3:material3-window-size-class")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.9.0")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
    // Optional - Integration with LiveData
    implementation("androidx.compose.runtime:runtime-livedata")
    // Optional - Integration with RxJava
    implementation("androidx.compose.runtime:runtime-rxjava2")

}