Android Compose 관하여

이번에 Compose 관한 포스팅을 해보고자 합니다.

 

(글에 앞서 Compose 에 관해 저의 개인적인 생각을 적었습니다. 글을 읽으시고 여러분들의 여러 의견들을 댓글로 남겨주세요 언제든지 환영입니다.)

 

Jetpack 에서 지원하는 UI 킷트라고 보시면됩니다.

 

https://developer.android.com/jetpack/compose?gclid=CjwKCAjwqauVBhBGEiwAXOepkVu6HeMiOSKIQTzphcunYkKS7YgLarqKhqHvbfdVk3z9wXPfQIJpkBoCUngQAvD_BwE&gclsrc=aw.ds 

Jetpack Compose  |  Android Developers

 

현재 안드로이드는 XML 방식으로 View를 구성하는데

 

Compose 는 Kotlin 으로 View를 구성하는 방식입니다.

 

간단하게 코드로 보시죠

compose_version = '1.1.1'

(Compose 1.1.1 환경에서 진행)

 

 

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {

        TestText()

    }
}

@Composable
fun TestText(){
    Text(text = "안녕하세요")
}

 

 

실제 화면에서는 이런식으로 나옵니다

 

굉장히 간결합니다.

 

그리고 Compose 사용하시면 Preview 라는 기능을 이용해 안드로이드 스튜디오에서

실시간으로 UI 가 변경되는것도 확인이 가능합니다.

 

 

그럼 사람들이 제일 많이 쓰는 리사이클러뷰를 한번 볼까요?

 

@ExperimentalMaterialApi
@Composable
fun RecyclerViewTest() {
    LazyColumn {//리사이크러뷰
        items((1..1000).toList()) {//아이템 개수
            Card(//ViewHolder 
                shape = RoundedCornerShape(8.dp) ,
                backgroundColor = Color.Red ,
                onClick = {

                },
                modifier = Modifier
                    .padding(10.dp)
                    .fillMaxWidth()) {
                DefaultPreview("hey"+it.toString())
            }

        }
    }
}

 

 

저게 끝입니다.

 

어뎁터도 필요없습니다. Paging3 도 지원을 한다고 합니다.

 

굉장히 코드가 간결해졌습니다.

 

 

https://velog.io/@dev-junku/Android-Naver-Android-Jetpack-Compose-%EC%A0%81%EC%9A%A9-%ED%9B%84%EA%B8%B0-%EB%B0%9C%ED%91%9C-%EC%A0%95%EB%A6%AC

[Naver Deview] Naver Android Jetpack Compose 적용 후기 발표 정리

 

또 다른 장점으로 빌드속도 증가와 apk 파일 용량이 대폭 줄어듭니다.

 

빌드속도 27초 -> 3초

 

apk file size = 53.2MB -> 3.64MB

 

이렇게 두고 봤을때 굉장히 매력적인 도구 같아 보입니다.

 

이런식으로 디자인을 하는걸  선언형 UI 라고 합니다

 

리액트 , 플루터 , 스위프트UI 랑 굉장히 비슷한 구조입니다.

 

https://medium.com/@kimdohun0104/%EC%82%AC%EB%9E%8C%EB%93%A4%EC%9D%80-%EC%99%9C-%EC%84%A0%EC%96%B8%ED%98%95-ui%EC%97%90-%EC%97%B4%EA%B4%91%ED%95%A0%EA%B9%8C-1440d03f4e49

사람들은 왜 선언형 UI에 열광할까?

 

그런데 말입니다..

 

Compose 를 계속 찾아보고 토이 프로젝트에 적용도 해보면서 드는생각이 하나 있었습니다.

 

1.Compose 에 프래그먼트 기능을 지원 안합니다.

https://developer.android.com/jetpack/compose/interop/interop-apis?hl=ko 

상호 운용성 API  |  Jetpack Compose  |  Android Developers

 

해결방법으로는

 

ComposeView 를 사용하거나

 

FragmentContainerView 를 사용하라고 명시되어있습니다.

 

 

ComposeView를 사용했을때

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
    return ComposeView(requireContext()).apply {
        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
        setContent {
            View()

        }
    }
}

@Composable
fun View(){
    Text(text = "dasdassad")
}

 

근데 성능 관련 문제점이 있습니다.

 

1.

BottomNavigation 을 사용하여

MainActivity , A Fragment , B Fragment 다 일반적인 xml 방식으로 만들었을때 입니다.

평범하게 매우 잘 넘어갑니다.

 

 

2.

위 조건에서 B Fragment 만 ComposeView 를 이용하여 작성을 했을때입니다.

 

자세히 보면 이동 할때 약간 멈칫후 이동합니다

 

먼가 느낌이 View가 그려지는 속도가 느린거 같습니다.

 

이런 사례가 저말고도 있더라고요

 

https://issuetracker.google.com/issues/227032090

Google Issue Tracker

 

 

FragmentContainerView  사용했을때입니다.

 

FragmentContainerView  를 사용하면 기본적으로 xml 파일을 만들어야됩니다.

 

https://developer.android.com/reference/androidx/fragment/app/FragmentContainerView

FragmentContainerView  |  Android Developers

 

제 기준에서는 Compose 의 매력적인 포인트중 하나는 xml 파일을 안만들어도 된다인데

 

Fragment 를 만들기위해 xml 을 만들어야한다?

 

흠 글쎄요.. 저는 별로 라고 생각이 듭니다.

 

 

2.기존 프로젝트에서의 마이그레이션

 

이런식의 UI 구조를 가진  app 이라고 생각을 해봅시다.

 

저 BottomNavigation 위에는  보통 Fragment 가 있습니다

 

근데 Compose 에서는 Fragment 지원 안한다고 하였습니다.

 

그래도 Compose 에서 BottomNavigation 은 지원합니다.

 

https://medium.com/geekculture/bottom-navigation-in-jetpack-compose-android-9cd232a8b16

Bottom Navigation in Jetpack Compose Android

 

위에 글을 참고 한다면 기존 Fragment 를 사용한것처럼 만들수있습니다.

 

하지만 문제는 새프로젝트가 아닌 기존 프로젝트에서 마이그레이션 할때입니다

 

기존에 있던부분을 마이그레이션 하는거보다 새로 만드는게 더 빠를수 있을거 같다는 생각이 듭니다.

 

그럼 여기서 의문점은

 

현재 1.1.1 버전 기준 저렇게까지 해서 기존 xml 에서 Compose 로 바꿔야하나?

 

저의 개인적인 생각으로는 아직은 NO 라고 말씀드리고 싶습니다.

 

출처-https://engineering.premise.com/measuring-render-performance-with-jetpack-compose-c0bf5814933

Measuring Render Performance with Jetpack Compose

 

Compose 성능을 측정한 결과입니다.

 

물론 작년 8월에 작성한 글이라 현재의 Compose 보다는 성능이 떨어질거라는걸 감안하고 봐주시길 바랍니다.

 

그걸 감안하더라도 순수 xml 로 작성했을때랑 그렇게 많이 차이가 나지 않습니다.

 

저는 여기서 이런 생각을했습니다.

 

Compose 는 현재로서 xml 을 대체하기보단 xml 말고 다른 선택지를 주었다

 

 

3.아직 자료가 너무 부족하다.

 

제목 그대로입니다. 현재로서는 자료가 너무 부족합니다.

 

그렇기에 프로젝트를 작성할때 명확한 가이드가 없습니다.

 

물론 회사마다 , 본인마다 입맛에 맞추어 개발을 할수 있겠지만

 

일반적인 표준화 모델이 없는 시점에서 저런식으로 개발을 했다가는 추후 유지보수측면에서 문제가 발생할거같습니다.

 

그리고 기존 사용하던 아키텍처 패턴을 적용할 방법도 생각을 해봐야될거같습니다. 

 

https://github.com/android/compose-samplesd 

GitHub - android/compose-samples: Official Jetpack Compose samples.

 

위 github 에 전세계 많은 사람들이 Compose 로 개발한 샘플들을 올리고있습니다.

 

보시면 굉장히 도움이 됩니다.

 

 

 

결론

글을 마무리 지으면서 결론을 내어보자 합니다.

 

구글에서 새로 선보인 Jetpack Compose 

 

위에 언급한 장점 내용만으로도 충분히 배울만한 이유가 있는거 같습니다.

 

그리고 언젠간 분명히 선언형 UI 시대로 넘어갈거 같습니다.

 

그렇기에 구글에서 Compose 를 굉장히 밀어주고 있는게 보이고요

 

취미 생활로 Android 개발을 하시는분들이라면 xml 말고 바로 compose 를 배우라고 할정도로

 

굉장히 쉽게 잘 만들어 진거같습니다.

 

하지만 Android 개발을 본업으로 삼으실분들이라면 xml 을 먼저 배우고 compose 를 추후에 배우라고 권장 해드리고싶습니다.

 

그리고 현재 현업에 종사하고 계신분들도 Compose 는 배워두시는걸 적극 추천 드리고싶습니다.

 

아직까지는 xml 생태계에 비해 많이 부족한 Compose 지만 이쪽 App 시장은 너무나 빠르게 트렌드가 변하기때문에

 

당장 내년만 되더라도 어떻게 될지 모르니까요.

 

당장에 기존 프로젝트에 적용을 하고 안하고는 자유입니다.

 

하지만 적용 시키는 부분에 있어서 충분한 공부를 하고 적용을  하시는걸 추천드리겠습니다.

 

긴글 읽어주셔서 감사합니다.