이 글은 ANDROID 개발자를 위한 JETPACK COMPOSE 코스를 바탕으로 작성되었습니다.
Compose와 View의 차이
Compose와 View는 많이 차이가 있습니다. View를 사용해서 UI를 구현하려면 XML로 UI를 정의하고 코드에서 연결하고 원하는 방식으로 작동시키기 위해서 함수를 설정해야 합니다. 하지만 Compose를 사용한다면 코틀린 코드만으로 충분히 UI를 구현할 수 있습니다.Compose는 어떻게(HOW)보다 무엇을(WHAT)에 초점이 맞춰져 있습니다. 이것이 Compose를 사용하기에 훨씬 직관적으로 만들어줍니다.
예를 들어서 간단한 앱을 만든다고 가정합시다. View를 이용하기 위해서는 XML로 UI의 모든 View를 작성하고 Listener 함수를 이용해 변화를 탐지하고 다른 Component의 상태를 변경하는 로직을 구현해야 합니다. 하지만 이렇게 상태가 변화함에 따라 뷰를 수동으로 업데이트하는 것은 오류가 발생하기 쉽게 만듭니다. 이런 작동 방식은 여러 상태가 변화하면 예상치 못한 충돌을 일으키기도 합니다.
이제는 앱을 Compose로 만든다고 생각합시다. Compose에서는 요소들을 XML로 작성할 필요 없이 Kotlin으로 바로 작성할 수 있습니다. 더 이상 XML을 Kotlin 코드로 연결할 필요가 없어 코드가 간결해집니다. 또한 Compose에서 UI 요소들은 오브젝트가 아닌 함수입니다. 즉 UI 요소를 참고하거나 그들을 호출함으로서 수정하는 것이 아닌 내가 넘기는 state 혹은 argument로 변경할 수 있게 된 것입니다.
위 사진은 Compose VS XML 스터디를 진행하면서 같은 UI를 구현하기 위한 코드를 비교하고자 들고온 것이다. 심지어 XML은 UI만 구현한 코드이고 Activity와 바인딩한 코드를 포함하면 +@가 된다. 반면에 Compose는 한 줄 추가하기만 하면...
Compose의 직관성
이것이 Compose의 강력한 점입니다. View와는 다르게 단순히 우리가 원하는 UI를 명확히 하고 UI 요소를 다시 표현하기 위해서 함수를 호출하고 State를 넘기면 그만입니다.
단순히 XML을 바인딩하는 코드를 없앤 것만 해도 만족스러운데, 이를 함수형으로 구현함으로서 UI 구현과 상태의 변경을 동시에 성취한 느낌입니다. Compose와 XML을 동시에 사용 중이지만 확실히 Compose가 손에 익을 수록 편리하다는 사실을 부정할 수가 없네요.
3줄 요약
Jetpack Compose는 HOW가 아닌 WHAT에 초점을 둔 UI 구현 방식이다.- Compose는 많은 불필요한 코드를 제거하고 코틀린의 장점을 UI 구현에 적용할 수 있다.
XML은 이제 조금씩 놔줄 때가 되었다.
이 스터디의 GitHub Repository가 궁금하다면? 링크
참고
- Android Developers 공식 문서 > ANDROID 개발자를 위한 JETPACK COMPOSE
- Android Developers Channel > Intuitive: Thinking in Compose - MAD Skills
