Android Jetpack Compose - Composable, Preview

Jetpack Compose

요즘 올라오는 취업 공고들을 보면 점점 Compose를 요구하는 곳들이 많아지고 있다. 실제로 현업의 개발자들과 이야기를 나눠보면 다들 Compose를 사용해 개발을 하기도하고, 그렇지 않더라도 Compose를 사용하는것에 대해 활발히 얘기하고 있다. 그렇다면 Compose가 뭘까?

What is Compose?

안드로이드 Jetpack에 포함된 라이브러리의 하나로 기존 xml방식으로 작성하던 UI를 코틀린을 사용하여 선언형 UI로 구현할 수 있도록 해주는 라이브러리이다.

기존에는 xml파일에서 UI를 작성한 뒤 코틀린 소스코드에서 동작을 작성해야했다면 Jetpack Compose를 사용하면 xml파일없이 소스코드 내에서 UI를 선언하는게 가능하다.

기초부터 시작하기

Jetpack Compose공부를 위해 처음부터 차근차근 시작해보며 알아본다.

기본적으로 새로운 프로젝트나 모듈을 생성할때 Empty Views Activity가 아닌 Empty Activity를 선택한 뒤 생성하게 되면 Jetpack Compose가 적용된 프로젝트가 생성되는데 기존의 xml방식과의 큰 차이점은 다음과 같다.

1. res (리소스 폴더)폴더 내부에 layout폴더가 없다.
   • 레이아웃을 xml파일로 구현하지 않기때문에 별도의 폴더가 필요없다.
2. ui.theme 폴더가 추가된다.
   • 기존 res폴더 내부에 있던 테마와 관련된 파일들이 소스코드 쪽으로 옮겨오게 된다.
3. View코드에서 더이상 xml파일을 불러오지 않으며, setContent함수가 추가되어 UI를 그리는 부분의 코드가 추가된다.

빈 Activity를 생성하면 최초로 생성된 코드에서 Jetpack Compose의 동작방식을 짐작해 볼 수 있다. 크게 3덩어리의 코드로 분류되어있는데 가장 상단에서 Activity의 코드를 확인할 수 있다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DefaultTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

기존처럼 xml파일을 불러오는 코드가 사라졌으며 setContent함수 내부에 UI를 그리는 코드들이 들어간다.

@Composable

Activity클래스 아래로는 @Composable과 @Preview어노테이션이 붙은 함수들이 존재하는데 @Composable을 사용한 함수는 해당 함수가 UI를 구성하는데 사용될 수 있다는걸 나타낸다.

따라서 @Composable함수 내에서 다른 @Composable함수를 선언해 계층형 UI구조를 만드는 것도 가능하다.

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

@Preview

@Preview어노테이션이 붙은 함수는 함수안의 내용을 안드로이드 스튜디오 내에서 볼 수 있도록 만들어준다.

Jetpack Compse를 사용해 View클래스를 생성하면 기존의 xml파일에서처럼 소스코드 내에 Code, Split, Design탭이 생기는데 이때 Split이나 Design탭을 선택하면 @Preview어노테이션이 붙은 함수의 내용이 표시된다.

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ComposeTestTheme {
        Greeting("Android")
    }
}