이번 글에서는 Jetpack Library Compose에 대해서 작성해보도록 하겠습니다.
Compose란?
안드로이드 공식문서에서 Compose를 UI 개발을 간소화하기 위해 개발된 툴킷이라고 하고 있습니다.
Compose를 그대로 해석하면 '구성하다' 라는 의미를 지니고 있습니다. 말 뜻대로 기존에 xml과 클래스를 연결하지 않고 UI를 구성할때 사용하는 라이브러리입니다.
Compose는 Kotlin의 특징을 이용해 선언형 프로그래밍으로 UI를 구성합니다.
선언형 프로그래밍이란
구현 방법을 신경쓰지 않고 무엇을 만들지 먼저 명령을 내리는 방식입니다.
🦾 사용방법
최신버전 안드로이드 스튜디오 기준 Empty Activity로 프로젝트를 만들면 컴포즈를 사용할 수 있습니다.
API 버전 21부터 컴포즈를 사용할 수 있습니다.
예제를 보기 전에 어노테이션을 먼저 알아야 합니다.
어노테이션이란?
어노테이션은 컴파일전에 메타데이터 역할을 합니다. 이게 무슨 소리냐면 컴파일 전에 다른 프로그램에서 정보를 얻기 위해 알려주는 역할을 하는게 어노테이션입니다.
컴파일 하기 전에 이 메서드 어떤 역할이야! 를 알려주는거죠
@Composable
- UI를 구성하기 위해 함수 위에 작성하는 어노테이션입니다.
@Preview
- 안드로이드 스튜디오 기능중 구성한 UI를 보고 싶을때 함수위에 사용하는 어노테이션
간단하게 사용하는 방법에 대해 보겠습니다.
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에 대해 작성해보았습니다. 긴 글 읽어주셔서 감사합니다.
'Android' 카테고리의 다른 글
안드로이드 레트로핏(Retrofit2)을 사용하여 주간 박스오피스 정보 불러오기 (1) | 2024.04.26 |
---|---|
안드로이드 DataBinding 사용 예제 (0) | 2024.03.04 |
안드로이드 ROOM 사용법 + 예제 (0) | 2024.03.03 |
Hilt 란? (0) | 2024.02.06 |
WebRTC 란? (2) | 2023.08.08 |
댓글