Android Compose 는 무엇일까?

안드로이드 컴포즈는 2018년 구글 io 에서 처음 공개됐고 3년간의 제작기간을 거쳐서 최근에 공개됐다고 합니다.

아니 그전에 컴포즈가 뭐냐구요?

선언적 UI 를 안드로이드에서 사용하게 해주는 멋진 친구입니다.

 

선언적 UI 는 모바일 크로스플랫폼에서 보였었는데 저는 이게 선언적 UI 인지도 모르고 있었으나 컴포즈를 접하면서

아 이거 플러터나 리액트네이티브에서 봤던거랑 비슷하네? 라고 생각하면서 알게 됐습니다.

 

선언적 UI 는 말그대로 UI를 코드상에 직접 선언합니다. 

기존 안드로이드는 xml 을 통해서 view 를 그리는 방식으로 id를 통해 연결하거나 데이터바인딩을 이용해서 UI 를 처리했었죠. 안드로이드를 조금이라도 해보신 분들은 다 아실거라고 생각합니다.

 

그러나 컴포즈는 그것과는 다르니 이름도 다르게 붙여졌겠죠?

 

안드로이드 컴포즈 기본 프로젝트를 생성해보면 이런 코드가 자동으로 만들어집니다.

 

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

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

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

setContent 는 xml 로 선언할때 xml 파일이름이 들어가는 부분이 이것으로 대체 됐다고 생각하시면 되고 

그 안에 JustWriteTheme 는 우리가 생성한 프로젝트 이름뒤에 Theme 가 붙어서 만들어집니다.

JustWriteTheme  를 컨트롤키를 누르고 클릭해보면 

 

private val DarkColorPalette = darkColors(
        primary = Purple200,
        primaryVariant = Purple700,
        secondary = Teal200
)

private val LightColorPalette = lightColors(
        primary = Purple500,
        primaryVariant = Purple700,
        secondary = Teal200

        /* Other default colors to override
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black,
    */
)

@Composable
fun JustWriteTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
            colors = colors,
            typography = Typography,
            shapes = Shapes,
            content = content
    )
}

이런 코드가 등장하는데 우리 프로젝트만의 테마가 일단 생겼다고 생각하시면 편할거 같아요.

그리고 @Composable 이라는 어노테이션을 볼 수 있습니다.

 

이게 붙어있는 코드블럭은 컴포즈에서 사용되는 view 의 단위를 표현한다고 생각하시면 됩니다.

플러터에서 말하는 위젯안에 위젯이 들어가는 방식과 유사하다고 이해하시면 될거 같습니다.

 

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

그럼 위 코드는 뭘까요? name 이라는 변수를 맞아서 textview 를 그리는 view 블럭을 생성하는 코드입니다.

저 코드를 Greeting("Android") 이런식으로 선언하면 Hello Android 라는 텍스트가 생기는것이죠.

여러개 적는다면? 적는만큼 textview가 생성됩니다. 

 

@Preview  라는 어노테이션도 보입니다. 이건 뭘까요?

컴포즈는 기존 안드로이드와 다른점이 있습니다. 오른쪽 화면에 xml 뷰를 미리보기 화면을 보는것처럼 뷰가 어떻게 그려지는지 확인하는 화면이 있습니다. 이 어노테이션을 붙인 애들만! 이 화면에 그려집니다. 

 

일단 간단하게 컴포즈에 대해 알아봤는데 조금 감이 오시나요??

 

view 대신 composable 이라는걸 사용한다. 

이렇게 만들어진 composable 은 재활용하기 쉽다.

ui를 그리는데 개발자가 복잡하게 많은 파일들을 만들어주지 않기 때문에 코드양이 줄고 관리하기 수월하다.

 

정도로 정리하고 다음 포스팅으로 넘어가도록 합시다!