제트팩 컴포즈 (Jetpack Compose)

 

1. 제트팩 컴포즈 (Jetpack Compose) 란?

제트팩 컴포즈(Jetpack Compose)는 구글에서 설계한 최신 툴킷이다.

 

데이터를 UI레이어로 변환해주는 일련의 함수를 호출하여 UI를 정의하고

 

UI 개발을 단순화 하기위해 반응적 프로그래밍 모델을 사용하는

 

완전한 선언적 UI 프레임워크이고 UI를 작성할때는 코틀린사용한다.

 

 

 

2. 제트팩 컴포즈 (Jetpack Compose)의 특징

기존에 UI를 만드는 방식은 findViewById()와 같은 함수를 사용해

레이아웃 파일에 View를 탐색해 관련 속성 메서드를 호출하여 속성을 변경해주었다.

 

이러한 방식들은 실수를 범하기 쉽고 개발자가 직접 어떻게 구현할지

적어줘야하기 때문에 신경써야할 부분이 매우많다.

 

 

이런 점들을 보안하기 위해서

 

◆ 컴포즈는 기본데이터가 변경되면 프레임워크가 해당함수를 자동으로 호출한다

그러면 함수가 실시간으로 뷰를 업데이트해주는 과정으로 구성되어있다.

 

◆  선언형 프로그래밍은 구현방법은 적지않고 만들라는 명령만 내려준다.

 

◆  UI의 상태는 패러미터 안에서 지정할 수 있다.

 

 

 

3. 예제

간단한 예제를 통해서 컴포즈가 어떤식으로 짜여져있는지 구조파악 정도만 하도록 하자.

 

오늘의 예제는 버튼을 눌렀을때 텍스트 뷰의 값을 바꿔주는 아주 간단한 예제를 준비했다.

 

기능이 돌아가는 구조보다는 UI의 구성쪽에 포커스를 최대한 두었다.

 

컴포즈로 코드를 작성했기 때문에 별도에 레이아웃 xml 코드는 없다.

 

 

메인 액티비티

package com.example.basiccomposeexample

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.basiccomposeexample.ui.theme.BasicComposeExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BasicComposeExampleTheme {

                Greeting()

            }
        }
    }
}

// Composable 이 View라고 생각하면 간단하다.
// modifier 는 뷰의 여러 속성을 다루는 객체
@Composable
fun Greeting(modifier: Modifier = Modifier) {

    // true false 를 담을 변수
    // 이 변수를 텍스트뷰가 감지해서 변수에 따라 값이 변한다.
    var changeText by remember { mutableStateOf(false) }

    // Column -> View 를 세로로 놓는 함수
    Column(modifier = Modifier

        // fillMaxSize() -> match_parent의 역할
        .fillMaxSize()

        // 수평정렬 속성
        , horizontalAlignment = Alignment.CenterHorizontally,

        // 수직정렬 속성
          verticalArrangement = Arrangement.Center) {

        // TextView 선언 및 초기화
        Text(
            
            // changeText 변수의 값에 따라 text 값을 지정
            text = if(!changeText) "바뀌기 전 텍스트" else "바뀐 후 텍스트",

            // 텍스트의 정렬을 위해서 가로길이를 최대로
            modifier = Modifier.fillMaxWidth(),

            // 텍스트 가운데 정렬
            textAlign = TextAlign.Center,

        )

        // Button 선언 및 초기화
        // 클릭 했을때 changeText 변수 true , false로 바꿔줌
        Button(onClick = { changeText = !changeText },

            // 일반 xml과는 다르게 여기서는 padding 이 margin의 역할을 함.
            // xml처럼 padding을 주기위해서는 contentPadding 사용
            modifier = Modifier.padding(40.dp)) {

            // button의 텍스트
            Text("텍스트 변경")

        }

    }

}

// 미리보기
// showBackground 속성을 이용하면 배경화면이 있는 상태로 미리보기 볼 수 있음
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {

    BasicComposeExampleTheme {
        Greeting()
    }

}

 

 

각 뷰들의 속성이나 선언에 대해서 xml과 비교한 간단한 주석을 달아서 설명해 두었다.

 

실행결과를 보자.

 

 

실행결과

버튼 누르기 전

버튼 누른 후

 

 

버튼을 누를때 마다 텍스트의 값이 바뀌는걸 알 수 있다.

 

 

 

기존에 사용하던 xml에서 Compose를 사용해보니 이렇게 간단한 레이아웃을 짜는데도

생각보다 시간이 오래걸렸고 새로운 속성들도 있었다.

 

하지만 선형적 방식으로 짜여진 코드를 보니 확실한 강점이 있는 프레임워크라고 생각한다.

 

기회가 된다면 컴포즈로 프로젝트를 진행해 보도록 하겠다.

 

 

 

오늘의 예제 gitHub 주소

 

nam-su/basicComposeExample (github.com)

GitHub - nam-su/basicComposeExample