Android Studio - Jetpack Compose

Android 개발을 xml로 줄곧 해왔던 지라.. compose 사용에 대해서 지식이 1도 없었다..

운 좋게도 Sopt 36기 Android 파트에 붙어서 굉장히 신나 있는 상태인데,(특히, 커리큘럼이 Compose 에 관한내용들이었다.)

세미나 과정을 거치며 compose 에 관해 제대로 공부해 보려고 한다.

 

 

 명령형 UI, 선언형 UI

프로그래밍 UI 를 구현하는 방법은 크게 2가지 로 나뉜다고 한다.

명령형 UI 와 선언형 UI 인데, 상태관리에 관한 차이로 프로그래밍 패러다임(?)에서 비롯된 개념이라고 한다.

 

프로그래밍 패러다임

프로그래밍 패러다임은 프로그래머에게 프로그래밍의 관점을 갖게 하고 코드를 어떻게 작성할 지 결정하는 역할을 해요. 새로운 프로그래밍 패러다임을 통해서는 새로운 방식으로 생각하는 법을 배우게 되고, 이를 바탕으로 코드를 작성하게 됩니다

 

명령형 프로그래밍, 선언형 프로그래밍

프로그래밍 패러다임에는 아래 두 가지 핵심적인 개념이 있습니다.

• 명령형 프로그래밍은 “어떻게(How)” 할 것인가에 관한 것으로, 개발자가 목표를 달성하기 위한 구체적인 절차와 명령어를 모두 기술합니다.
• 선언형 프로그래밍은 “무엇(What)”을 할 것인가에 초점을 맞추며, 최종 결과만을 선언하고 내부의 구체적인 실행 방식은 추상화하여 처리합니다.

여태 만들었던 xml 기반 코드가 명령형, 이제 배우게 되는 compose 기반 코드가 선언형 프로그래밍이라고 이해하면 편할 것 같다.

 

그래서, 이 Jetpack Compose란 무엇인가?

1. Compose?

Jetpack Compose는 2021년에 새롭게 발표된 Android 개발을 위한 선언형 UI 툴킷입니다.

Compose를 사용하면 뷰를 명령형으로 변경하지 않고도 UI를 렌더링할 수 있는 선언적 API를 제공하여 UI를 더 쉽게 작성하고 유지관리할 수 있습니다.

1. 특징

1. 선언형 UI: 앞서 말했듯이 Jetpack Compose는 선언형 UI 도구입니다. 그렇기 때문에 개발자가 UI의 구조와 상태를 직접 선언하면, UI의 변경이 필요할 때 Jetpack Compose가 자동으로 UI를 업데이트 해줍니다. 이를 통해 UI 코드가 보다 간결해지고 읽기 쉬워집니다.
2. Kotlin 기반: 코루틴, 플로우, 확장 함수 등 Kotlin의 효과적인 기능들을 통해 효율적이고 간결하게 코드를 작성할 수 있습니다.
3. 재사용 가능한 컴포넌트: UI를 작은 단위의 컴포넌트로 나누어 관리할 수 있습니다. 해당 컴포넌트를 통해 복잡한 UI를 구성할 수 있습니다.
4. 반응형 UI: Compose는 상태 변경에 따라 UI가 자동으로 반응하며 업데이트 됩니다. 이는 데이터의 변화가 UI에 실시간으로 반영되어야 하는 애플리케이션에 특히 유용합니다.
5. 기존 앱과 상호작용 가능: 기존 View (쉽게 말해서 XML 코드)를 Compose UI에 넣을 수 있고, Compose를 View 안에 넣을 수 있습니다. 즉, Compose와 XML을 함께 사용 (Compose ↔ XML 마이그레이션 가능)이 가능합니다.
6. Jetpack 라이브러리 통합: Compose는 Jetpack과 통합되도록 설계되었습니다.

 

상태관리와 UI 업데이트

선언형 UI는 최종 상태를 선언만 해주면 상태가 변할 때마다 UI를 어떻게 변화시킬지 프레임워크나 라이브러리가 자동으로 저장해준다고 합니다.

 

@Composable

어노테이션으로 알고 있는 구조인데.. 언제 사용하는지 몰랐습니다. 근데 이것을 일반적으로 어노테이션을 포함하는 컴포저블 함수라고 명명한다고 하네요.

xml을 사용하지 않고 코틀린에서 함수로 UI를 작성하기 위해서는 필수적으로 Compose 를 붙혀야된다고 합니다

 

@Composable
fun HistoryScreen(navController: NavController) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier
            .background(color= Color.Black)
            .fillMaxSize()
    ) {
        Text(
            color = Color.White,
            text="HISTORY",

            )

    }
}

 

이런식으로용

자세히 알아보자면 

@Composable 의 역할

1. 멱등성 보장 - 연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질추가로, 컴포저블 함수는 실행되는 순서가 정해져있지 않기 때문에 멱등성이 중요합니다.모든 컴포즈 시스템은 컴포저블이 멱등성을 보장한다는 가정 아래에 설계되었습니다. 그렇기 때문에 하나의 컴포저블이 여러 번 실행 되더라도 input이 같으면 output이 동일하므로 재실행을 건너뛰게 됩니다.
2. Position Memoization즉, 컴포즈 런타임은 컴포저블 위치 키를 가지고 모든 정보를 관리하며 이를 통해 UI가 업데이트 됩니다.
3. Position Memoization은 같은 위치에서 같은 input으로 호출하면 항상 같은 output이 나온다는 뜻이며, @Composable은 이런 Position Memoization이 100% 보장됩니다.
4. 데이터 제공 or 컴포저블 방출
   1. @Composable (input) → output ⇒ 리턴 값이 있는 유형이며 이는 데이터를 제공하는 역할을 합니다.
   2. @Composable (input) → Unit ⇒ 컴포저블을 방출하는 역할을 합니다. 이를 통해 UI가 그려진다고 생각하면 편리합니다.
5. 또, Composable은 두 개의 유형으로 나뉘게 됩니다.

Composable이 이러한 역할을 가지기 때문에 선언형 UI 의 특징을 잘 활용한 컴포즈 만을 이용해 화면을 구성할 수 있습니다.

 

** 추가적으로 , 위와 같은 Composable 로 만든 UI 를 실시간으로 보기위해서는

@Preview 어노테이션을 사용해서 확인할 수 있습니다.

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ATSOPTANDROIDTheme  {
        Greeting("Android")
    }
}