[Android/안드로이드] 안드로이드 컴포즈 기본 구성요소

안녕하세요, 여러분! 이번 포스트에서는 안드로이드의 선언형 UI 툴킷인 Jetpack Compose의 기본적인 구성요소에 대해 알아보겠습니다. 이를 통해 Compose를 이용한 UI 작성에 대한 기본적인 이해를 높일 수 있습니다.

 

Jetpack Compose는 선언형 UI를 구성하기 위한 다양한 구성요소를 제공합니다. 이들 구성요소는 각각 특정 UI 요소를 표현하며, 이들을 조합하여 복잡한 UI를 만들 수 있습니다. 가장 기본적인 구성요소로는 Text, Button, Image 등이 있습니다.

 

먼저, Text 구성요소는 화면에 텍스트를 표시하는데 사용됩니다. 이는 다음과 같이 사용할 수 있습니다.

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

위의 코드는 "Hello, World!"라는 텍스트를 화면에 표시합니다. Text 함수는 @Composable 함수로, Compose에서 제공하는 UI 구성요소를 선언하는 데 사용됩니다.

 

다음으로, Button 구성요소는 사용자가 클릭할 수 있는 버튼을 화면에 표시하는데 사용됩니다. 이는 다음과 같이 사용할 수 있습니다.

@Composable
fun SimpleButton() {
    Button(onClick = { /* handle click */ }) {
        Text("Click Me")
    }
}

위의 코드는 "Click Me"라는 텍스트가 쓰여진 버튼을 화면에 표시합니다. Button 함수는 클릭 이벤트를 처리하기 위한 onClick 콜백을 받습니다.

 

마지막으로, Image 구성요소는 이미지를 화면에 표시하는데 사용됩니다. 이는 다음과 같이 사용할 수 있습니다.

@Composable
fun SimpleImage() {
    Image(painter = painterResource(id = R.drawable.my_image), contentDescription = "My Image")
}

이외에도, Jetpack Compose는 Row, Column, Box, Surface 등과 같은 레이아웃 구성요소를 제공하여, 여러 UI 구성요소를 조직하고 배치하는 데 도움을 줍니다. 이런 레이아웃 구성요소들은 화면에 UI 요소들을 어떻게 배치할지 결정하는 역할을 합니다. 예를 들어, Row와 Column은 각각 가로 방향과 세로 방향으로 UI 요소들을 배치합니다.

 

또한, Jetpack Compose는 State와 같은 상태 관리 도구를 제공하여, UI의 상태를 관리하고 업데이트하는 데 도움을 줍니다. State는 UI의 특정 상태를 저장하고, 이 상태가 변경될 때 UI를 자동으로 업데이트합니다. 이를 통해 UI가 동적인 데이터에 반응하도록 만들 수 있습니다.

 

예를 들어, 사용자의 입력을 받아서 화면에 표시하는 텍스트 필드의 경우, 이 텍스트 필드의 현재 값은 State에 저장될 수 있습니다. 사용자가 텍스트 필드에 새로운 값을 입력하면, 이 State는 새로운 값으로 업데이트되고, 이에 따라 화면에 표시되는 텍스트도 자동으로 업데이트됩니다.

 

다음은 State를 사용하여 텍스트 필드의 값을 관리하는 예제입니다.

@Composable
fun TextFieldWithState() {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { newText -> text = newText },
        label = { Text("Enter text") }
    )
}

이 코드에서 remember { mutableStateOf("") }는 State를 생성하고 초기화하는 코드입니다. TextField의 value는 이 State의 현재 값을 가져오고, onValueChange는 사용자의 입력에 따라 State를 업데이트합니다.

 

이상으로 '안드로이드 컴포즈 기본 구성요소'에 대한 글을 마치겠습니다. 이 글을 통해 Compose의 기본 구성요소에 대한 이해를 높이는 데 도움이 되었기를 바랍니다. 앞으로도 여러분의 안드로이드 개발 여행에 도움이 될 수 있는 유용한 정보와 팁을 계속 제공하겠습니다. 다음 번에 뵙겠습니다!