8) 소개 및 개발 환경 설정

SOCICAL·2024년 7월 23일

android

목록 보기

3/20

Jetpack Compose는 Android UI를 만드는 데 사용되는 최신 툴킷입니다.

XML 레이아웃을 작성하는 대신, Kotlin 코드로 UI를 구성할 수 있게 해줍니다. 이로 인해 UI 코드가 더 간결하고 이해하기 쉬워지며, 유지 보수도 용이해집니다.

개발 환경 설정

Jetpack Compose를 사용하기 위해서는 몇 가지 준비가 필요합니다.

1. Android Studio 설치

먼저, 최신 버전의 Android Studio를 설치해야 합니다. Jetpack Compose는 Android Studio Arctic Fox 이상 버전에서 지원됩니다.

2. 새로운 프로젝트 생성

Android Studio를 열고 "New Project"를 클릭합니다.
템플릿 선택 화면에서 "Empty Compose Activity"를 선택합니다. 이 템플릿은 기본적으로 Jetpack Compose를 사용할 수 있도록 설정되어 있습니다.
프로젝트 이름, 저장 위치, 패키지 이름 등을 입력한 후 "Finish"를 클릭합니다.

3. Gradle 설정

프로젝트가 생성되면 build.gradle 파일을 열어 Jetpack Compose 관련 설정이 제대로 되어 있는지 확인합니다.(기본적으로 설정이 되어 있습니다.)

// build.gradle (Project level)
buildscript {
    ext {
        compose_version = '1.1.1' // 최신 Compose 버전을 확인하세요.
    }
}

// build.gradle (App level)
android {
    ...
    composeOptions {
        kotlinCompilerExtensionVersion = compose_version
    }
    buildFeatures {
        compose true
    }
}

dependencies {
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.3.1'
}

4. 간단한 예제 작성

이제 간단한 예제를 통해 Jetpack Compose를 사용해보았습니다.

MainActivity.kt

package com.example.mycomposeapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.example.mycomposeapp.ui.theme.MyComposeAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyComposeAppTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

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

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyComposeAppTheme {
        Greeting("Android")
    }
}

위 코드에서 Greeting 함수는 "Hello Android!"라는 텍스트를 화면에 표시합니다. @Composable 어노테이션을 사용하여 컴포저블 함수를 정의합니다. DefaultPreview 함수는 Android Studio에서 UI를 미리 볼 수 있도록 도와줍니다.