Compose를 공부하고 이전에 View로 작성했던 프로젝트를 Compose로 리팩토링을 완료했습니다. 리팩토링을 하면서 Compose에 대해서 체계적으로 글로 정리해서 나중에도 다시 찾아볼 수 있는 자료가 있으면 좋겠다는 생각이 내내 들었습니다.
나중에도 찾아보면서 Compose로 프로젝트를 작성할 수 있도록 책에서 공부하면서 실습하고 프로젝트에서 유용했던 부분들을 정리한 글을 작성하고자 합니다.

Compose 함수

컴포저블 함수(컴포넌트 함수)는 컴포즈로 사용자 인터페이스를 만들기 위해 이용하는 특수한 코틀린 함수입니다.

컴포저블 함수는 @Composable 어노테이션을 이용해서 선언하기 때문에 일반 함수와 구별됩니다.

컴포저블 함수에서는 일반 함수, 컴포저블 함수를 모두 호출할 수 있지만, 일반 함수에서는 컴포저블 함수를 호출할 수 없습니다.

Stateful Composable과 Stateless Composable

컴포저블 함수 종류로는 상태 컴포저블(Stateful Composabel)과 비상태 컴포저블(Stateless Composable)가 있습니다. 상태는 앱 실행 중 변경할 수 있는 모든 값으로 정의됩니다. (체크 박스 현재 설정 상태, 텍스트 필드에 입력된 문자열 등)

컴포저블 함수 내에서는 상태값을 저장할 수 있고, 상태 값을 저장하기 위해서는 remember 키워드와 함께 mutableStateOf 함수를 호출해야 합니다. 상태를 포함하는 경우 상태 컴포저블에 해당되게 됩니다.

@Composable
fun DemoScreen() {
    var isSwitchOn by remember {
            mutableStateOf(false)
    }

    ...
}

DemoSwitch는 전달한 상태값을 사용하지만 스스로 상태값을 저장하지 않습니다. 따라서 DemoSwitch는 비상태 컴포저블로 간주됩니다.

@Composable
fun DemoSwitch(isOn: Boolean, onSwitchChange: (Boolean) - > Unit) {
    Switch(checked = isOn, onCheckedChange = onSwitchChange)
}

Foundation Composable과 Material Composable

컴포즈를 이용해서 앱을 개발할 때는 사용자가 정의한 컴포저블 함수인 커스텀 컴포저블 함수와 내장 컴포넌트(Text, Button, Column 등)을 조합해서 사용합니다.

컴포즈에서 번들로 제공하는 컴포저블은 레이아웃(Layout), 파운데이션(Foundation), 머터리얼 디자인(Material Design) 컴포넌트의 세 가지로 분류할 수 있습니다.

레이아웃 컴포저블

레이아웃 컴포저블을 이용하면 컴포저블을 화면에 배치하고 배치된 컴포넌트들이 상호 동작하는 방법을 정의할 수 있습니다.

• Column
• Row
• Box
• BoxWithConstraints
• ConstraintLayout

파운데이션 컴포저블

파운데이션 컴포저블은 기본적인 사용자 인터페이스 기능을 제공하는 최소한의 컴포넌트 집합입니다. 이 컴포넌트들은 기본적으로 특정한 스타일이나 테마를 내포하지 않습니다. 하지만, 커스터마이징를 통해서 형태나 액션을 자유롭게 정의할 수 있습니다.

• BaseTextField
• Canvas
• Image
• LazyColumn
• LazyRow
• Shape
• Text

머터리얼 디자인 컴포저블

머터리얼 디자인 컴포저블은 구글이 제공하는 머터리얼 테마 가이드라인을 따르는 컴포저블입니다.

• AlertDialog
• Button
• Card
• CheckBox

…

Material Design 사이트에서 다양한 머터리얼 디자인 컴포저블을 확인할 수 있습니다.