[Compose] Jetpack Compose 들어가며

[서론]

요즘 굉장히 핫한 Jetpack Compose에 관심이 생겨 공부를 하기 시작했다.

 

신기술을 공부할 때면 기존의 코드와 어떤 점이 달라질까? 라는 설렘이 생기기 시작한다.

지금은 Jetpack Compose를 공부하는 시작하는 단계이지만, 나중에 Compose를 자유자제로 다루기 시작할 때면

여태까지 한 프로젝트를 통째로 리팩토링 해보고 싶다.

 

[Why?]

그럼 이제 Jetpack Compose가 무엇이길래 기업에서 Jetpack Compose로 바꾸려고 할까?

먼저 공식문서에 따르면

Jetpack Compose는 SwiftUI, Flutter와 같은 선언형 UI중의 하나입니다. 라고 나와있다.

 

기존의 Android의 XML으로 작성하는 방식은 특정 상태에 따라 UI가 어떻게 보여질지에 대해 구현했었다.

하지만 Compose는 특정 상태에 따라 UI가 무엇을 보여주면 되는지에 대해 구현하는 것이다.

 

기존의 XML의 방식의 코드의 단점을 확인해보면 왜 Compose를 써야하는지 이해가 잘 될 것이다.

1. java / kotlin 코드와 높은 의존성을 가진다.

2. 화면 요소의 재사용성이 낮다.

3. 레이아웃이 복잡할수록 코드가 비대해지고 알아보기 어려워진다.

등등 단점들이 존재한다. 

 

Compose는 Kotlin과 선언형 UI를 기반으로 만들어져 재사용이 쉽고, 코드가 간결하다는 장점이 있다.

또한, 레이아웃을 작성하기 위해 여러 언어를 배울 필요도 없어진다.

 

그럼 이제 다음 Compose를 이용한 간단한 코드를 살펴보자.

새로운 프로젝트를 만들 때 empty가 아닌 compose 프로젝트를 만들면 다음과 같이 형성된다.

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

@Composable
fun Greeting(name: String) { //함수인데도 불구하고 대문자로 시작함
    //Composable 은 대문자로 시작함
    Text(text = "Hello $name!")
}

//Preview는 미리보기로 볼 수 있음
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    Practice_2Theme {
        Greeting("gg")
    }
}

Greeting 함수에 의해 Hello Android가 뷰에 나오게 된다. 여기서 Greeting함수는 대문자로 적은 이유는 Composable이 붙어서이다.

만일 소문자로 시작하게 적으면 구글에서 권장하는 케이스로 변경하라고 경고가 발생한다.

 

또한, Preview는 미리보기라고 생각하면된다. 기존의 xml코드에서 디자인태그를 통해 내가 코딩하고 있는 뷰를 미리 볼 수 있었다.

미리보기

 

이제 코드를 조금 변경해보자.

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

결과화면

위와 같이 겹쳐서 텍스트가 형성된 것을 확인할 수 있다.

xml파일에서는 vertical이나 horizontal로 설정하여 수직, 수평을 설정하곤 했다. 

Compose에는 다음과 같이 표기한다.

//                    Row{
//                        Text("Hello")
//                        //길이 띄어쓰기
//                        Spacer(Modifier.width(16.dp))
//                        Text("World")
//                    }

먼저 수평이다. 수평으로 텍스트를 나열할 때에는 Row, 둘 사이의 마진을 주어 좀 띄어쓰기를 해주고 싶을 때에는

Spacer(Modifier.width(16.dp)) 몇 dp정도 마진을 줄 것인지 적어주어 나타낸다.

                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .background(color = Color.Blue)
                            .padding(16.dp),
                        horizontalAlignment = Alignment.CenterHorizontally //가운데 정렬
//                        verticalArrangement = Arrangement.SpaceBetween
                    ){
                        Text("Hello")
                        Text("World")
                    }

Row와 반대로 Column은 수직이다. 안에 있는 텍스트들을 수직으로 나타낸다.

테이블의 Column과 Row를 이해하고 있다면 Compose기초에 대해 이해하기 편리할 것 같다.

Column은 수직으로 나타내는데, 단순히 수직으로 나타내기 위해선 ( )를 안적어줘도 되지만, 위의 코드처럼 modifier를 이용해서 배경색이나 가운데정렬, 등 나타내기 위해서는 괄호를 적어주어 변경할 내용들을 적어주어야한다.

위 그림을 참조하면 이해하기 쉬울 것이다. 괄호를 적어주었을 때 마우스를 가져다대면 위의 사진처럼 코드를 작성하라고 나온다.

 

기존의 xml코드에서는 margin, background, id, text 등 코드의 양을 많이 채워졌을텐데, 확실히 Compose를 이용하니 단순한 코드여도 코드의 양이 줄어드는 것을 확인할 수 있다.

또한, 코틀린을 사용하는 덕분에 코드의 재사용성까지 장점이 되었다. 

Compose의 많은 장점들 덕분에 현재 많은 기업에서 도입하려고 하는 것 같다.

 

앞으로 Compose로 간단한 앱들을 만들어보며 Compose와 친해지는 시간을 만들어야겠다!!!!

 

GitHub - SsongSik/Jetpack_Compose: Creating apps using Jetpack Compose