Android JetPack Compose

What is Compose?

🖼️ 안드로이드 UI 구축을 위한 Kotlin 기반의 최신 Declarative(선언형) UI 프레임워크

 

🤔 선언형 방식이란?

어떤 결과를 얻고자 하는지 선언하고, 필요한 작업은 추상화된 방식으로 처리합니다.

 

프로그램 상태를 변경하는 대신 원하는 결과를 표한하는 코드를 작성하는 방식입니다.

 

따라서 Compose는 UI가 무엇을 무여주면 되는지에 대해서 작성(구현)하면 됩니다.

 

👀 명령형 방식

어떤 일을 어떻게 해야하는지 명식적으로 작성하는 방법입니다.

 

조건문, 반복문 등으로 원하는 결과를 얻기 위해 순서를 정확히 작성해야 합니다.

 

절차/객체 지향 프로그래밍에서의 일적인 방식입니다.

 

 

---

 

Compose의 특징

1. 함수형 프로그래밍

Greeting 함수는 입력 값을 받아들이고 텍스트를 출력하는 함수입니다.

 

이 함수는 상태나 가변성 없이 입력에 대한 예측 가능한 결과를 생성합니다.

 

MyApp 함수는 Column을 사용하여 여러 Greeting 함수를 세로로 배열한 컴포넌트입니다.

 

이 컴포넌트도 입력 값을 받아들이고 UI를 출력하는 함수이며, 상태나 가변성 없이 입력에 따라 동일한 출력을 생성합니다.

 

2. 재사용 가능한 구성요소

뷰 속성 구현을 상황에 따라 상세히 작성하지 않아도 되기 때문에 재사용과 확장성에 용이합니다.

 

또한, 다른 구성요소와 조합해 복잡한 UI 작성이 가능합니다.

 

3. 상태와 효과의 분리

상태(state) : UI에 표시되는 데이터

 

효과(effect) : UI 외부와의 상호작용을 처리

 

4. 레이아웃 계층 구조

구성 요소를 중첩해 UI 계층을 구성하고, 계층 구조를 통해 UI 구조와 배치를 정의합니다.

 

5. 미리보기 

Preview annotation(@Preview)을 사용하여 디자인을 할 때, UI를 실시간으로 확인이 가능합니다.

 

 

---

 

Example

class UseCompose : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent{
            MyScreenContent()
        }

    }

    @Preview
    @Composable
    fun MyScreenContent(){
        Column(    // 세로 정렬 컬럼
            modifier = Modifier  //Modifier : 레이아웃 및 스타일 지정 속성
                .fillMaxSize()
                .padding(16.dp),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "title")
            
            Text(
                text = "Welcome to Jetpack Compose!",
                style = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold),
                modifier = Modifier.padding(bottom = 16.dp)
            )
            Button(
                onClick = { startLayerActivity() },
                modifier = Modifier.padding(bottom = 8.dp)
            ) {
                Text(text = "click me!")
            }
            Text(text = "실시간으로 적용이 되는 Compose")
        }
    }

 

 

 

 

https://developer.android.com/jetpack/compose/tutorial?hl=ko 

Android Compose 튜토리얼  |  Android 개발자  |  Android Developers