Jetpack Compose - 1

zxcmnb05·2021년 5월 31일
21

Jetpack Compose

목록 보기
1/2
post-thumbnail

Jetpack Compose는 기존 안드로이드 코드에서 사용하는 xml 레이아웃을 사용하지 않고 선언형 함수를 사용하여 코드를 간소화할 수 있습니다.

먼저 Jetpack Compose를 사용하기 위해서는 아래 링크로 이동하여 설정하여야 합니다.

개발 환경 설정: Compose

설정이 끝나셨다면 Compose를 시작해봅시다.

먼저 아래 코드를 봐주세요

아래 코드를 작성을 하면 Hello world 가 출력이 됩니다.

class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello world!")
        }
    }
}

기존에 xml 레이아웃을 사용하였을 때에 비하면 아주 간단하게 한 줄로 Text를 출력할 수 있게 됩니다.

위의 코드를 함수화 시킬 수 있는데 그 방법은
함수 앞에 @Composable 주석을 추가하여 함수처럼 사용할 수 있습니다.

class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("Compose")
        }
    }
}

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

그리고 Compose에서는 미리 보기 기능을 지원하는데
이 기능을 사용하기 위해서는 함수 앞에 @Preview 주석을 사용하면 미리 보기 기능을 사용할 수 있습니다.

하지만 만약 함수에서 매개변수를 받아 온다면 Preview 기능을 가진 함수를 만들어서 미리 보기 기능을 사용할 함수를 호출해 주면 됩니다.

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

@Preview
@Composable
fun DefaultPreview() {
    Greeting("Android")
}

  • @Preview를 사용하여 미리 보기 기능을 사용하였을 때 위의 사진의 오른쪽과 같이 미리 보기가 뜨는 것을 볼 수 있습니다.

다만 주의할 점은 @Preview 주석을 단 함수에서 값을 불러 오기 때문에 실제 앱을 빌드를 하였을 때는 @Preview가 보이지 않고 setContent에서 불러오는 함수가 출력됩니다.

혹시나 수정 및 보완할 점이 있다면 댓글로 남겨주세요

profile
안드로이드 개발&공부중인 DGSW5기

6개의 댓글

comment-user-thumbnail
2021년 6월 3일

감사합니다 !

1개의 답글
comment-user-thumbnail
2021년 6월 3일

좋은 글 감사합니다. Swift UI 랑 비교해봐도 Jetpack Compose 의 문법 자체가 훨씬 사람이 이해하기 쉬운 것 같아요! 다만 Swift UI 에서 지원하는 라이브 프리뷰같은 기능이 하루빨리 추가되었으면 하는 바람입니다 ㅎㅎ

1개의 답글
comment-user-thumbnail
2021년 6월 3일

한글화된 Jetpack Compose 자료가 없어서 곤란하던 참인데 이렇게 써주셔서 감사합니당!

1개의 답글