📱안드로이드 xml과 compose

 

 

🗨️ 혼자 공부도 깃허브에서
다른 사람들과 스터디를 하면서, 깃허브도 관리하면 좋겠다는 생각에 organization을 팠고, fork를 이용해서 자신의 공부한 내용들을 공유하면서 자신의 레포지토리를 관리하려고 했다. 그래서 fork 레포지토리를 클론받고, 그 안에 초기세팅을 하고, 내부에 안드로이드 스튜디오를 실행했다.

서론이 좀 길지만, 이번에 다루려는 주제는 xml과 compose에 대한 것이다. 장단점은 뭐고, 차이점이 뭔지 등을 정리하려고 한다.

 

📌 안드로이드 스튜디오 

https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

블로그 쓴 시점, 미어캣 버전을 다운로드 해준다. (다른 블로그를 참고해서 다운로드하고 초기세팅을 했지만, 이 내용에 대해서 다룰 내용이 아니므로 버전만 얘기하고 넘어간다.)

 

 

📌 XML 🤔

안드로이드는 XML을 이용하여 안드로이드의 화면을 구성하는 요소인 View를 그리는 방식이다. (다른 말로, 위젯을 그린다고 보면 된다.)

•  xml은 태그를 이용하여 객체를 정의하는 마크업 언어로, 부모-자식 관계가 있기 때문에 UI의 구조가 viewGroup-view의 Tree형태로 표현되는 형태이다.
• 그러나, 복잡한 UI 형태를 그릴수록 트리는 점점 넓고 깊어지는 형태를 갖추어야 해서 하위에서 상위로, 상위에서 하위로의 flow가 많이 비효율적이고, 태그 안에 태그가 반복되는 구조라서 자신이 원하는 UI 코드를 찾기 힘들 정도로 가독성이 좋지 않다. 
• 아래가 xml 코드인데 많이 가독성이 좋지 않는 것을 한눈에 알 수 있다. 익숙해지면 상관없지만, 처음보는 사람들한테는 거부감이 들기 마련일 것이다. 직접 코드를 작성해본 사람도 가독성이 좋지 않다고 느낄 것이다.

 

• 로직과 UI가 완전히 분리되어 있어 UI를 사용할 때 XML과 Class를 오가면서 봐야하고,
• UI 한 요소의 값을 갱신해주기 위해서 각 View의 id 값을 알고 있어야 하기 때문에 XML과 Class 간의 의존성이 너무 상승한다는 것을 알 수 있다.
• 안드로이드는 기본적으로 Xml를 통해서 ui만든 다음에 class(Activity or Fragment or Dialog 등등)에서 ui를 컨트롤 한다.
• 코드 작성시 내가 의도하지 않는 UI를 만들거나 실수로 UI를 잘못 정의하는 경우가 있다.
• 아래는 코드를 짤 때 많이 참고했던 문서이다. 의존성이 너무 높은 경우, 가독성 등 코드를 짤 때 고려해야 할 사항을 알려주고 있으니 참고해봐도 좋을 것 같다. -> 이 문서를 보면 xml의 단점이 더 들어날지도 모르겠다.
• https://frontend-fundamentals.com/code/

변경하기 쉬운 코드

• 중복되는 UI가 생기면 보일러 플레이트 코드를 없애기 위해 리소스 XML 파일을 만들게 되는데, 그럴 경우 한 화면을 구성하는데 리소스 파일 + 리소스 파일을 적용하는 Layout XML 파일 + View의 동작을 구현할 로직 파일, 총 3개의 파일을 생성하게 되면서 파일의 개수가 기하급수적으로 늘어나게 된다.
• 이렇게 xml의 구현 방식이 비효율적이게 됐고, 이런 단점을 보완하기 위해 등장한 것이 Android Jetpack Compose이다.

 

📌 Compose 👍

• Jetpack Compose는 네이티브 Android UI를 빌드하기 위한 최신 도구 키트이다.
• Compose는 Kotlin으로 제작되는 라이브러리 이며 선언형 프로그래밍 방식으로 UI를 그린다. 
• 선언형 프로그래밍은 아주 심플한 정의를 내려본다면, 컴파일러에게 UI를 이렇게 저렇게 그려라 선언을 해서 만드는 방식이다.
• 기존에 UI를 만드는 방식은 findViewById()와 같은 함수를 사용하여 트리를 탐색하고, button.setText(String), container.addChild(View) 또는 img.setImageBitmap(Bitmap)과 같은 메서드를 호출하여 노드를 변경 했었다. 이러한 함수는 위젯의 내부 상태를 변경한다.
• 위와 같은 방식은 실수를 범하기 쉽고, 개발자가 직접 어떻게 구현할지 적어줘야하기 때문에 신경써야할 부분이 매우 많다.
• 기존의 XML은 "특정 상태에 따라 UI가 어떻게 보여질지(How)"에 대한 구현이면, Jetpack Compose는 "특정 상태에 따라 UI가 무엇을 보여주면 되는지(What)"에 대한 구현이다.
• Compose를 사용하면 프런트엔드 뷰를 명령적으로 변형하지 않고도 앱 UI를 렌더링할 수 있는 선언적 API를 제공하여 앱 UI를 더 쉽게 작성하고 유지관리할 수 있다.
• Compose를 사용하면 데이터를 받아서 UI 요소를 내보내는 구성 가능한 함수들을 정의해서 사용자 인터페이스를 빌드할 수 있다. 간단한 예는 Greeting 위젯으로, String을 받아서 인사말 메시지를 표시하는 Text 위젯을 내보낸다.

• 위의 그림은 데이터를 전달받고 이를 사용하여 화면에 텍스트 위젯을 렌더링하는 간단한 구성 가능한 함수이다.
• 위 처럼 @Composable 주석으로 주석을 지정해야 하고, 모든 구성 가능한 함수에는 이 주석이 있어야 한다. 이 주석은 이 함수가 데이터를 UI로 변환하기 위한 함수라는 것을 Compose 컴파일러에 알린다. 
• 구성 가능한 함수는 XML이 아닌 Kotlin으로 작성되기 때문에 다른 Kotlin 코드와 마찬가지로 동적일 수 있다. 예를 들어 사용자 목록으로 환영하는 UI를 빌드한다고 가정해 보면,

@Composable
fun Greeting(names: List<String>) {
    for (name in names) {
        Text("Hello $name")
    }
}

• 위 코드는 이름 목록을 받아서 각 사용자에 대한 인사말을 생성하고, 구성 가능한 함수는 상당히 정교할 수 있다. if 문을 사용하여 특정 UI 요소를 표시할지 여부를 결정할 수 있고, 루프를 사용할 수도, 도우미 함수를 호출할 수 있도 있다. 기본 언어의 유연성을 완전히 활용할 수 있어서 이러한 성능과 유연성은 Jetpack Compose의 주요 이점 중 하나이다.
• 명령형 UI 모델에서 위젯을 변경하려면 위젯에서 setter를 호출하여 내부 상태를 변경하고, Compose에서는 새 데이터를 사용하여 구성 가능한 함수를 다시 호출한다. 이렇게 하면 함수가 재구성되며, 필요한 경우 함수에서 내보낸 위젯이 새 데이터로 다시 그려진다. 그런 면에서, Compose 프레임워크는 변경된 구성요소만 지능적으로 재구성할 수 있다.

@Composable
fun ClickCounter(clicks: Int, onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text("I've been clicked $clicks times")
    }
}

• UI의 일부가 잘못된 경우, Compose는 업데이트해야 하는 부분만 재구성하기 위해 최선을 다한다. 즉, UI 트리에서 위 또는 아래에 있는 컴포저블을 실행하지 않고 단일 버튼의 컴포저블을 다시 실행하는 것을 건너뛸 수 있다.
• 더 자세한 내용을 알고 싶다면, 아래 링크를 확인해 보는 것도 좋다. 

https://developer.android.com/develop/ui/compose/mental-model?hl=ko

Compose 이해  |  Jetpack Compose  |  Android Developers

 

 

 

 

 

 

 

---

🙇‍♂️ 참고 자료

• https://dsc-sookmyung.tistory.com/507

XML과 Compose의 차이점

• https://developer.android.com/?hl=ko

Android 모바일 앱 개발자 도구 - Android 개발자  |  Android Developers

• https://zion830.tistory.com/7

[Android] 뷰(View)와 XML 레이아웃의 기본 구조

• https://medium.com/@huiung/jetpack-compose-%EC%82%AC%EC%9A%A9-%ED%9B%84%EA%B8%B0-37993fbaf4ba

Jetpack Compose 사용 후기