Android Jetpack ComposeUI 기초 문법 및 특징

ComposeUI 강의를 열심히 봤는데, 아무리 따라해도 머리에서 휘발되어버리는 느낌이다.

직접 Compose를 이용한 토이 프로젝트를 하기 전에 전체적으로 문법 정리를 먼저 해야할 것 같았다.

 

---

 

1. @Composable 애너테이션

Composable 함수

Jetpack Compose에서 UI를 정의하는 기본 단위

함수에 @Composable 애너테이션을 붙이면 이 함수는 UI 요소를 그릴 수 있게 된다.

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

 

2. Text

텍스트 출력

텍스트를 화면에 표시하는 가장 기본적인 컴포넌트이다.

@Composable
fun SimpleText() {
    Text(text = "Hello, World!")
}

 

3. Column과 Row

레이아웃

Column은 수직으로, Row는 수평으로 UI 요소를 배치하는 데 사용된다.

@Composable
fun VerticalLayout() {
    Column {
        Text(text = "First Item")
        Text(text = "Second Item")
    }
}

@Composable
fun HorizontalLayout() {
    Row {
        Text(text = "First Item")
        Text(text = "Second Item")
    }
}

 

4. Modifier

UI 요소 꾸미기

Modifier는 Compose에서 UI 요소의 크기, 패딩, 배경색, 정렬 등을 조정하는 데 사용된다.

@Composable
fun StyledText() {
    Text(
        text = "Styled Text",
        modifier = Modifier
            .padding(16.dp)
            .background(Color.LightGray)
            .fillMaxWidth()
    )
}

 

5. State와 remember

상태 관리

Compose에서 UI는 상태에 따라 변경된다.

remember와 mutableStateOf를 사용하여 상태를 기억하고 관리할 수 있다.

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Column {
        Text(text = "Count: $count")
        Button(onClick = { count++ }) {
            Text(text = "Increment")
        }
    }
}

 

6. Button

버튼

사용자의 입력을 받아 동작을 수행하는 UI 요소이다.

@Composable
fun SimpleButton() {
    Button(onClick = { /* Do something */ }) {
        Text(text = "Click Me")
    }
}

 

7. Image

이미지 출력

Image는 리소스나 URL에서 이미지를 불러와 화면에 표시하는 컴포넌트이다.

@Composable
fun DisplayImage() {
    Image(
        painter = painterResource(id = R.drawable.sample_image),
        contentDescription = "Sample Image"
    )
}

 

8. Scaffold

기본 레이아웃 구조

Scaffold는 기본적인 앱 레이아웃을 설정하는 데 사용된다.

topBar, bottomBar, floatingActionButton 등을 쉽게 배치할 수 있다.

@Composable
fun MyApp() {
    Scaffold(
        topBar = {
            TopAppBar(title = { Text(text = "My App") })
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { /* Do something */ }) {
                Icon(Icons.Filled.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        // Content goes here
        Text("Hello, Scaffold!", modifier = Modifier.padding(innerPadding))
    }
}

 

9. Surface

표면

Surface는 배경색, 모양 등을 지정할 수 있는 UI 요소이다.

다른 컴포저블들을 감싸는 데 사용된다.

@Composable
fun MySurface() {
    Surface(
        color = Color.LightGray,
        modifier = Modifier.padding(16.dp)
    ) {
        Text(text = "This is a Surface")
    }
}

 

10. LazyColumn과 LazyRow

리스트

많은 양의 데이터를 효율적으로 표시하기 위해 LazyColumn과 LazyRow를 사용한다.

화면에 보이는 항목들만 메모리에 로드하므로 성능에 유리하다.

(xml에서 ListView와 비슷한 느낌)

@Composable
fun SimpleList() {
    LazyColumn {
        items(100) { index ->
            Text(text = "Item #$index")
        }
    }
}

 

11. Box

겹쳐서 배치

Box는 여러 컴포넌트를 겹쳐서 배치할 때 사용된다.

기본적으로 자식 요소를 상하좌우 중앙에 배치한다.

@Composable
fun BoxLayout() {
    Box(modifier = Modifier.fillMaxSize()) {
        Text("This is at the bottom", modifier = Modifier.align(Alignment.BottomEnd))
        Text("This is at the top", modifier = Modifier.align(Alignment.TopStart))
    }
}

 

12. Composable 재사용성

함수형 UI

ComposeUI의 큰 장점은 UI 컴포넌트를 함수로 정의하고, 이를 재사용할 수 있다는 점이다.

UI를 작은 컴포저블 함수로 분리하면 코드의 재사용성과 유지보수성이 높아진다.

@Composable
fun GreetingCard(name: String) {
    Card(
        modifier = Modifier.padding(8.dp),
        elevation = 4.dp
    ) {
        Text(text = "Hello, $name!", modifier = Modifier.padding(16.dp))
    }
}

@Composable
fun GreetingsList(names: List<String>) {
    Column {
        names.forEach { name ->
            GreetingCard(name = name)
        }
    }
}

 

13. Composable Preview

미리보기 기능

Android Studio에서 @Preview 애너테이션을 사용하면 컴포저블을 미리보기 모드로 확인할 수 있다.

이를 통해 UI의 모습을 실시간으로 확인하면서 개발할 수 있다.

@Preview(showBackground = true)
@Composable
fun PreviewGreeting() {
    Greeting("Compose")
}

 

14. State Hoisting

상태 위임

Compose에서 상태는 일반적으로 UI와 별도로 관리된다.

컴포저블 내부에서 직접 상태를 관리하기보다는 외부에서 상태를 전달받아 처리하는 패턴을 권장한다.

@Composable
fun Counter(count: Int, onIncrement: () -> Unit) {
    Button(onClick = onIncrement) {
        Text("Count: $count")
    }
}

@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }

    Counter(count = count, onIncrement = { count++ })
}

 

15. Animation

애니메이션

Compose는 다양한 애니메이션 API를 제공하여 쉽게 UI 요소에 애니메이션을 적용할 수 있다.

animateDpAsState, animateColorAsState 등 다양한 애니메이션 컴포저블을 사용할 수 있.

@Composable
fun AnimatedBox() {
    var isBig by remember { mutableStateOf(false) }

    val size by animateDpAsState(if (isBig) 100.dp else 50.dp)

    Box(
        modifier = Modifier
            .size(size)
            .background(Color.Blue)
            .clickable { isBig = !isBig }
    )
}

 

---

 

이렇게 다 정리했는데, 이번엔 프로젝트 하나 ComposeUI로 제대로 만들어보자 !!