혼자서 Android Jetpack Compose - 1

취업 준비를 하면서 공고를 보면 우대사항이나 자격 요건에 Jetpack Compose를 요구하는 회사가 많아지고 있는거 같다.
지금까지는 나중에 공부하자면서 미뤄왔지만, 이번 드로이드나이츠 2024의 세션을 보면서 Jetpack Compose가 굉장히 많은 부분을 차지한다고 느끼면서 이제는 더 이상 미룰수 없다고 생각해서 천천히 공부를 해보려고 한다.

Android Jetpack Compose란

Jetpack Compose는 안드로이드 개발자들이 손쉽고 빠르게 안드로이드 앱을 개발할 수 있도록 지원하는 라이브러리를 모아놓은 Android Jetpack의 라이브러리중 하나로 Android 네이티브 UI를 기존의 명령형 프로그래밍 방식(xml)과는 다르게 코틀린 언어를 사용해 선언형 프로그래밍 방식으로 구현할 수 있도록 해주는 라이브러리이다.

선언형 프로그래밍

명령형 프로그래밍의 방식의 초점인 "어떻게"와 대조적으로 선언형 프로그래밍 방식이란 "무엇"을 해야 하는지에 대해 선언하는 것에 초첨을 맞춘 프로그래밍 패러다임이다.

즉, 원하는 결과를 명시하고 해당 결과를 달성하기 위한 구체적인 단계는 프로그래밍 언어 or 프레임워크가 자동으로 처리하는것을 말한다.

예를 들어 간단한 버튼 클릭시 숫자가 올라가는 코드를 기존의 xml과 compose로 작성해보면

xml 방식

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="You clicked 0 times"
        android:textSize="24sp" />

    <Space
        android:layout_width="0dp"
        android:layout_height="16dp" />

    <Button
        android:id="@+id/btn_click"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click me" />

</LinearLayout>

class CounterActivity : AppCompatActivity() {
    private var count = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_counter)

        val textCount = findViewById<TextView>(R.id.text_count)
        val btnClick = findViewById<Button>(R.id.btn_click)

        btnClick.setOnClickListener {
            count++
            textCount.text = "You clicked $count times"
        }
    }
}

Jetpack compose 방식

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

    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        Text("You clicked $count times")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { count++ }) {
            Text("Click me")
        }
    }
}

확실히 Jetpack Compose를 사용해 작성한 코드가 기존의 xml을 통해 UI를 구현하는 방식보다 간결해진것을 확인할 수 있다.

Jetpack Compose를 사용해야 하는 이유

그럼 우리가 Jetpack Compose를 공부하고 사용해야 하는 이유는 무엇일까?
Android Developer 공식문서를 보면 4가지 이유로 Jetpack Compose를 사용해야한다고 말하고 있다.

간결한 코드

• Compose를 사용하면 Android View 시스템을 사용할 때에 비해 더 적은 코드로 많은 작업을 할 수 있다.
• 코드를 Kotlin과 XML로 나누지 않고 Kotlin 만으로 작성하기 때문에 같은 파일에서 작성되면 코드를 추적하기 훨씬 쉽다.

직관적

• Compose는 선언적 API를 사용하기 때문에 Compose가 나머지를 처리하므로 UI를 설명하기만 하면 된다.

빠른 개발 과정

• Navigation, ViewModel, Coroutine과 같은 일반적인 라이브러리는 Compose와 함께 작동한다.
• 실시간 미리보기와 같은 기능을 제공한다.

강력한 성능

• Material Design, Dark Theme, Animation등을 기본적으로 지원한다.

Jetpack Compose 계획

일단 작년쯤에 결제 해놓은 강의에 Compose 강의가 포함되어 있어서 강의를 보면서 Compose를 천천히 공부해보려고 한다. 이제 시작이지만 Compose를 사용해 개인 프로젝트에 적용해보는것을 목표로 잡고있다.
할 수 있겠지...?