안드로이드 JetPack Compose 알아보기 (1)

** 본 문서는 Android 공식 문서를 활용하여 정리한 자료입니다 **

Compose 등장 배경

• 항상 새로운 기술을 학습할 땐 등장배경과 사용이유를 먼저 아는게 좋습니다.

• 기존의 안드로이드는 XML로 뷰를 정의했으며 이를 액티비티로 가져와서 이를 관리하게 됩니다.

• 이 과정에서 매우 많은 보일러플레이트 코드가 발생하고 이 코드를 유지보수 할때, XML과 클래스를 번갈아가면서 확인해야 하는 상황이 생길수도 있습니다.

• 가장 큰 이유는 명령형 방식은 개발자가 직접 로직을 만들기 때문에 크고 작은 실수들이 발생할 수 있으며 이로인해 불필요한 시간이 소요될 수 있기 때문입니다.

Compose란?

• Compose는 Kotlin을 타겟으로 하여 선언형으로 UI를 제작할 수 있도록 만든 방식입니다.

• 기존의 방식은 findViewById와 같은 메소드로 뷰를 탐색하고 setText, addView와 같은 방식을 사용하여 UI를 조작했습니다. 하지만 선언형 프로그래밍은 한마디로 컴파일러에게 명령을 하는 방식입니다.

• 구현방법은 명시하지 않고 만들어 라는 명령만 내리기 때문에 훨씬 직관적인 문법으로 작성할 수 있습니다

장점?

• 버그가 일어날 확률이 적으며 많은 보일러 플레이트 코드를 없애고 적은 코드로 UI구현이 가능해지며 생산성이 높아지고 유지보수가 쉬워집니다.

• 플랫폼 종속성 최소화

• 상속으로 인한 문제 해소 : Button 이 TextView를 상속하고 TextView가 View를 상속하는 등 불필요한 다양한 기능을 구현해야 하는 문제 해소

• 중첩 레이아웃으로 인한 성능문제 해소 : Measure한번만 수행

• UI 재사용성 (merge로 가능하지만 불편, Compose는 간편하게 해소)

• ViewStub대신 조건문으로 간단하게 해결 가능

• 데이터바인딩 불필요

• CustomView작성 시 XML내에서 Attribute를 처리해야되는 단점을 보완하여 코드 단위에서 모두 해결 가능

• 간편한 목록형 UI 구성

학습

• 먼저 NewProject에서 아래와같이 EmptyComposeProject를 선택합니다.

• gradle에 아래와같이 종속성을 추가합니다.

dependencies {
    implementation 'androidx.compose.ui:ui:1.1.1'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.1.1'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.1.1'
    // Material Design
    implementation 'androidx.compose.material:material:1.1.1'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.1.1'
    implementation 'androidx.compose.material:material-icons-extended:1.1.1'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.4.0'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.1.1'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.1.1'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.1.1'
}

• 먼저 기존의 setContentView가 아닌 setContent{}형태로 뷰를 구성합니다. setContent내부에 사용할 수 있는 메소드를 선언하려면 @Composable 어노테이션을 사용하면 됩니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TextCreate()
        }
    }

    @Composable
    private fun TextCreate() {
        Text(text = "helloWorld")
    }
 }
 

• 미리보기를 사용할땐 @Preview 어노테이션을 사용하면 미리보기가 가능합니다.

다음편에서는 LinearLayout의 수직, 수평처럼 사용할 수 있는 Row, Column, 겹쳐서 놓을 수 있는 Box에 대해 정리하겠습니다.