[Compose] Compose란?

학교 동아리를 진행하며 안드로이드를 공부하던 중, 동아리 내에서의 Compose 스터디를 시작하게 되었다.

Compose 스터디에 참여하게 된 계기는 단순히 ui를 만들던 중 Compose를 사용하면 좀 더 쉽게 만들 수 있다는 얘기를 들어서였다.

Compose를 공부할 겸 겸사겸사 알아가는 내용들을 적어볼 것이다.

첫 번째 내용으로는 "Compose란 무엇인가?"부터 시작하려고 한다.

Compose란?

우선 UI의 방식에 대해 알아보면, 

UI에는 선언형 UI와 명령어 UI가 있다고 한다.

둘의 차이점을 다음과 같이 예로 들어볼 수 있을 것 같다. (내가 생각해본 것이라 맞을지는 잘 모르겠다.)

• 선언형 UI: 내 방의 벽지는 초록색이고 거울, 모니터, 화장품이 있어.
• 명령형 UI: 내 방에 초록 벽지를 붙이고, 거울, 모니터, 화장품을 배치해.

명령형을 코드로 보면 다음과 같을 것이다.

// id가 room인 TextView가 있다고 하자.

val room: TextView = findViewById(R.id.room)
room.setColor(R.color.green)
room.setText("거울 모니터, 화장품")

선언형은 다음과 같은 형식으로 사용된다.

// Room을 작성할 Compose

text = "거울 모니터 화장품"
colors = Green // 색상은 Material Color System을 모델링한다. 즉, Colors를 정의한 후 MaterialTheme에 전달하여 사용한다.

위의 예시는 간단하여 큰 차이가 안느껴지는 것 같다.

하지만, ui에 관한 업데이트가 많아질수록 선언형 ui가 간소화되는 것을 확인할 수 있을 것이라 생각한다.

 

안드로이드의 Compose 또한 선언형 UI이다.

.xml로 작성하게 되면 안드로이드의 클래스와 강한 의존성을 갖게 되는데, Compose를 사용함으로써 ui를 함수 형태로 작성하게 되고, 클래스와의 의존성을 줄일 수 있다.

Compose 프로젝트 시작

처음 프로젝트를 만들 때 템플릿에서 Empty Compose Activity(Material3)을 클릭하여 시작하였다.

기본적으로 다음과 같이 생성된다.

package com.example.composestudy

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.example.composestudy.ui.theme.ComposeStudyTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeStudyTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeStudyTheme {
        Greeting("Android")
    }
}

Compose는 구성가능한 함수로, 함수의 위에 @Composable이 붙는다.

이는 위에서도 말했듯이 다른 @Composable 함수 내부에서 @Composable 함수를 호출할 수도 있다.

 

setContent는 기존 뷰 시스템에서였다면 다음처럼 사용했을 것이다.

setContentView(R.layout.main_activity)

// 혹은 DataBinding 사용 시
binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

Compose를 사용하면서는 xml 파일을 사용하는 대신 함수에서 구성 가능한 함수를 호출해준다.

 

마지막으로 Compose는 함수라고 했는데, 그렇다면 어떻게 UI가 잘 구성되고 있는지 확인할 수 있을까?

Compose에 대해 처음 접했을 때 들었던 궁금증이었다.

이는 @Preview를 통해 확인할 수 있다.

위에서 봤던 초기 화면에서도 DefaultPreview() 함수 위에 @Preview(showBackground = true)가 있는 것을 확인할 수 있다.

 

@Preview는 여러 다른 함수들에게 다른 이름으로 지정하여 사용할 수 있다.

@Preview(name = "Greeting1)
@Composable
fun PreviewGreeting() {
	Greeting("Greeting 1")
}

@Preview(name = "Greeting2)
@Composable
fun PreviewGreeting() {
	Greeting("Greeting 2")
}

---

Compose에 대해 공부하며 작성을 했다지만 부족한 부분이 많을 것이라 예상된다.

부족한 부분을 계속해서 채워나가야겠다.