안드로이드 Compose란 + 예제

이번 글에서는 Jetpack Library Compose에 대해서 작성해보도록 하겠습니다.

 

Compose란?

안드로이드 공식문서에서 Compose를 UI 개발을 간소화하기 위해 개발된 툴킷이라고 하고 있습니다.

Compose를 그대로 해석하면 '구성하다' 라는 의미를 지니고 있습니다. 말 뜻대로 기존에 xml과 클래스를 연결하지 않고 UI를 구성할때 사용하는 라이브러리입니다.

 

Compose는 Kotlin의 특징을 이용해 선언형 프로그래밍으로 UI를 구성합니다.

 

선언형 프로그래밍이란

구현 방법을 신경쓰지 않고 무엇을 만들지 먼저 명령을 내리는 방식입니다.

 

🦾 사용방법

 

최신버전 안드로이드 스튜디오 기준 Empty Activity로 프로젝트를 만들면 컴포즈를 사용할 수 있습니다.

API 버전 21부터 컴포즈를 사용할 수 있습니다.

 

예제를 보기 전에 어노테이션을 먼저 알아야 합니다.

어노테이션이란?

어노테이션은 컴파일전에 메타데이터 역할을 합니다. 이게 무슨 소리냐면 컴파일 전에 다른 프로그램에서 정보를 얻기 위해 알려주는 역할을 하는게 어노테이션입니다.

컴파일 하기 전에 이 메서드 어떤 역할이야! 를 알려주는거죠

 

@Composable

• UI를 구성하기 위해 함수 위에 작성하는 어노테이션입니다.

@Preview

• 안드로이드 스튜디오 기능중 구성한 UI를 보고 싶을때 함수위에 사용하는 어노테이션

@Preview 사용 시 보이는 화면

 

간단하게 사용하는 방법에 대해 보겠습니다.

 

setContent {
 // 이 안에 UI를 구성하는 코드나 @Composable 함수를 호출함
}

 

setContent안에 코드를 작성해 UI를 구성하게 됩니다.

 

MainActivity.kt

class MainActivity : ComponentActivity() {
    var age = 20
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column {
                Text(text = "Name : Taron")
                Text(text = "Age : ${age}")
            }
        }
    }
}

 

xml을 사용하지 않고 TextView를 화면에 출력하는 코드입니다.

 

결과 화면

 

이런식으로 기존에 xml을 연결해 사용하는 방식을 사용하지 않았는데도 텍스트 뷰를 확인할 수 있습니다.

 

Compose는 State를 사용해서 데이터를 관리하게 되는데 상태가 변경되면 뷰를 다시 그리는 방식을 사용하고 있습니다.

State를 사용한 예제를 보여드리도록 하겠습니다.

 

MainActivity.kt

class MainActivity : ComponentActivity() {
    private val TAG = "MainActivity"
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Log.d(TAG, "onCreate: UI 구성 됨 number 값 ${number.value}")
            var number = remember { mutableStateOf(0) }
            Column {
                Text(text = "숫자 ${number.value}")
                Button(onClick = { number.value++ }) {
                    Text(text = "증가")
                }
                Button(onClick = { number.value-- }) {
                    Text(text = "감소")
                }
            }
        }
    }
}

 

 

결과 화면

위에서 제가 상태가 변경되면 UI를 재 구성한다고 언급 했었는데요.

코드를 보면 Ui를 구성할때 Log로 확인할 수 있도록 코드를 작성했는데 실제로 값이 변경되면 로그가 다시 출력되는 것을 확인 할 수 있습니다.

로그캣 화면

로그를 확인 해보면 상태값이 바뀔때마다 UI를 다시 구성하는 것을 확인 할 수 있습니다.

 

오늘은 Compose에 대해 작성해보았습니다. 긴 글 읽어주셔서 감사합니다.