Compose CodeLab 1주차 : Compose 기초

Android Jetpack Compose CodeLab 1주차 - Compose Basics

본 글은 Android Jetpack Compose CodeLab 1주차 - Compose Basics 를 정리한 내용입니다.

아마 안드로이드 개발을 접해봤다면, 안드로이드는 웹 프론트엔드와는 다르게 XML 파일을 수정하거나 드래그 앤 드롭 기반 레이아웃 에디터를 수정해 화면을 구성한다는 것을 기억하실 것입니다.

 

드래그 앤 드롭으로 레이아웃을 작성하는 방법은 어떤 면에서는 코드를 직접 작성하는 것보다 편리했지만, 레이아웃을 정의하기 위해 요소들간의 상대적인 관계를 알아야만 하거나, 동적으로 레이아웃을 구성해야 하는 경우에는 많은 어려움이 따랐습니다.

 

하지만 제트팩 컴포즈를 사용하면 마치 HTML의 마크업을 구성하는 것처럼 프로그래밍적인 방법으로 UI를 구성할 수 있게 되고, 무엇보다도 데이터가 갱신되면 뷰를 전체 재렌더링하는 대신 변경된 데이터만 재렌더링한다는 성능적 이점을 갖게 된다고 합니다.

(+ 이 부분에서는 리액트나 뷰의 Virtual DOM이 생각났는데, 실제로 이와 유사한 원리인지는 다음 기회에 알아보도록 하겠습니다!)

---

컴포즈 프로젝트 생성하기

컴포즈를 활용하기 위해서는 새 프로젝트를 생성할 때 "Empty Compose Activity" 를 선택합니다.

"Empty Activity" 를 선택했을 때 activity_main.xml 파일과 레이아웃 에디터가 보이던 이전과 달리, 하나의 코틀린 파일만이 생성됩니다.

이제 첫 번째 컴포즈 프로젝트가 준비된 모습입니다.

Composable UI

이전에는 XML 파일 또는 레이아웃 에디터로 구성한 뷰를 통해 화면을 생성했다면 컴포즈를 사용한 프로젝트에서는 @Composable 함수와 코드를 통해 UI를 선언적으로 구성할 수 있게 되는데요, Compose UI를 구성하는 첫 번째 요소인 텍스트를 한번 사용해 보겠습니다.

Text

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
            	// Text 함수는 텍스트 요소를 렌더링합니다.
            	Text("Hello world!")
            }
        }
    }
}

먼저 Text 요소를 하나 추가해 보겠습니다.

컴포즈를 사용하면 마치 리액트 네이티브나 플러터를 사용할 때처럼 각 요소들을 위젯(또는 컴포넌트)처럼 사용할 수 있게 되는데요, Text 함수 안에 전달한 문자열이 실제 텍스트로 화면에 나타난 모습입니다.

이제 @Composable 어노테이션을 통해 텍스트를 커스텀해보도록 하겠습니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                ComposedText("Chanmin")
            }
        }
    }
}

// 컴포즈를 사용해 Text를 ComposedText라는 요소로 분리했습니다.
// 이제 ComposedText에서는 인자, 스타일 등을 원하는 대로 커스텀할 수 있게 됩니다.
@Composable
fun ComposedText(name: String) {
    Text("Hello, $name!");
}

자, 마치 리액트의 styled components 를 사용하던 것처럼 UI가 별도의 코드로 분리된 모습입니다.
이렇게 UI를 별도의 코드로 분리할 수 있을 뿐만 아니라, 스타일을 추가할 수도 있습니다.

 

또한, @Composable 위에@Preview(showBackground = true) 이라는 어노테이션을 추가하면 코드로 작성한 UI의 미리보기도 가능합니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
             MyApplicationTheme {
                 ComposedText("Chanmin")
             }
        }
    }
}

// 컴포즈를 사용해 Text를 ComposedText라는 요소로 분리했습니다.
// 이제 ComposedText에서는 인자, 스타일 등을 원하는 대로 커스텀할 수 있게 됩니다.
@Preview
@Composable
fun ComposedText(name: String) {
    Text("Hello, $name!");
}