[Android] Jetpack Compose란

• Jetpack Compose는 구글에서 개발한 모던한 안드로이드 개발을 위한 선언형 UI Toolkit이다.
• 2021년 8월에 1.0.0 스테이블 버전이 정식 출시되었으며, 공식적으로 프로덕션에 적용 가능하게 되었다.

원래 안드로이드 개발에서는 앱의 레이아웃(UI)을 표현하기 위해 xml을 사용해왔다. xml로 레이아웃을 먼저 작성한 뒤, 자바/코틀린 코드에서 레이아웃의 구성 요소(View)들을 호출해서 소통하는 방식이다. 하지만 이러한 방식에는 몇몇 근본적인 문제점이 존재했다.

• Java/Kotlin 코드와 높은 의존성을 가짐
  이미 완성된 앱에서 버튼을 하나 빼고 싶다고 하자. 단순히 xml을 수정해서 버튼을 지우면 될 것 같지만, 해당 버튼과 연결된 Java/Kotlin 코드를 함께 삭제하지 않으면 오류가 발생한다.
• 화면 요소의 재사용성이 낮음
  5개의 입력 칸이 있는 회원가입 화면을 만들고자 한다. 입력 칸이 모두 똑같이 생겼더라도, 5개의 EditText를 하나하나 만들어 주어야 한다.
• 코드가 길고 보일러플레이트가 많음
  xml 언어 자체의 특성과 상술한 재사용성 문제로 인해, 레이아웃이 복잡할수록 코드가 비대해지고 알아보기 어려워진다.

일단 안드로이드 진영 최대 빌런인 RecyclerView를 안 써도 되는게 너무 좋았다. 리스트 하나 띄우는데 ViewGroup, LayoutManager, ViewHolder, Adapter, DiffUtil, Item layout... 이게 다 필요하다는게 말이 되나? 컴포즈에서는 LazyColumn에 데이터만 넣으면 알아서 그려준다.

 

---

명령형 UI 구성 방식(Xml) VS 선언형 UI 구성 방식(Compose)

명령형 프로그래밍 vs 선언형 프로그래밍에 대해 궁금하다면 여기를 참고하자

기존의 명령형 UI 구성 방식

• 기존의 UI를 만드는 방식으로 기존 안드로이드는 트리 형태로 뷰를 구성한다.
• 레이아웃을 맨 아래에 깔고 그 위에 브랜치처럼 텍스트뷰, 이미지뷰를 넣고 다시 레이아웃을 넣는 등 쌓아가는 개념으로 뷰를 그렸다.
• 이와 같은 작업 방식은 개발자로 하여금 xml이라는 막대한 리소스를 반복적으로 낭비하게 하며, 노드를 변경하기 위해 findViewById, viewBinding, dataBinding을 통하여 노드에 접근하고 setText(), setImageBitmap( ) 등의 메서드를 사용하여 변경해야 한다.
• 이런 접근 방식은 불필요한 코드를 만들 뿐만 아니라 한 노드에 대한 업데이트의 충돌이 발생할 확률을 높이게 된다.

명령형 UI 구성 방식의 시나리오

• 어떤 변수를 참조하는 UI가 있고, 이벤트에 의해 변수가 변경되었고 UI에 반영해야 한다.
• 명령형 UI 구성 방식은 변경된 내용을 갱신할 것을 UI 객체에 명령한다.

b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)KOTLIN

 

명령형 UI 방식은 'UI 객체에 대한 갱신을 명령'하는 것이다. 따라서 개발자는 변수와 UI 객체를 정확히 연결하고 관리해야 한다. 만약 새로운 변수나 이벤트 혹은 UI 객체가 추가된다면 그 과정에서 실수가 없도록 연결기를 정확하게 해야 한다.

 

선언형 UI 구성 방식

• 선언형 UI는 새로 나온 개념으로 화면 전체를 개념적으로 재생성한 후 필요한 변경사항만 적용하는 방식으로 적용된다.
• 선언형 UI에서 중요한 부분은 State 즉 상태라는 개념이다.
• 뷰마다 State가 있고, 이 값을 변경하게 되면 새로운 화면을 생성해서 다시 화면을 업데이트하게 된다. 따라서 개발자는 State변화에만 집중을 하면 된다.
• 이러한 접근 방식은 스테이트풀(Stateful) 뷰 계층 구조를 수동으로 업데이트할 때의 복잡성을 방지할 수 있다.

선언형 UI 구성 방식의 시나리오

• 어떤 변수를 참조하는 UI가 있다. 이벤트에 의해 변수가 변경되었고 UI에 반영해야 한다.
• 이벤트에 의해 변수를 변경해 주면 해당 변수를 참조하고 있는 뷰는 State의 변경에 따라 뷰를 재생성한다.
• 선언형 UI는 명령형 UI와는 달리 변화가 생긴 UI 객체를 다시 생성한다.
• 이로써 얻는 장점은 개발자가 변수와 UI 객체 간의 연결고리에 대하여 고민할 필요가 없다는 점이다.

return ViewB(
  color: red,
  child: ViewC(...),
)

 

• 선언형 UI에서 가장 중요한 것은 위 공식이다.
• ‘위젯 또는 함수’의 인자로 상태를 넘겨주면, 그에 맞는 View를 생성한다.
• 함수형 프로그래밍 개념의 순수 함수처럼 같은 상태에 대해서는 항상 똑같은 View를 리턴하게 된다.

---

 

Compose 쓸만한가요?

구글에서 설명하는 Compose를 이용 시 얻을 수 있는 장점은 아래와 같다.

 

Less Code - 코드 감소

• 적은 수의 코드로 더 많은 작업을 하고 전체 버그 클래스를 방지할 수 있으므로 코드가 간단하며 유지 관리하기 쉽다.

Intuitive - 직관적

• UI만 설명하면 나머지는 Compose에서 처리한다.
• 앱 상태가 변경되면 UI가 자동으로 업데이트되게 된다.

Accelerate Development - 빠른 개발 과정

• 기존의 모든 코드와 호환되므로 언제 어디서든 원하는 대로 사용할 수 있다.
• 실시간 미리 보기 및 Android 스튜디오 지원으로 빠른 개발을 지원한다.

Powerful - 강력한 성능

• Android 플랫폼 API에 직접 액세스 하고 머티리얼 디자인, 다크 테마, 애니메이션 등을 기본적으로 지원하는 멋진 앱을 만들 수 있다.

 

Compose 사용 방법에 대해서는 추후 포스팅 예정입니다.

 

https://roian6.hashnode.dev/jetpack-compose

Jetpack Compose 살짝만 맛보기 🚀 (feat. 국룰 투두리스트 만들기)

https://jminie.tistory.com/192#1.1.1.%20%EB%AA%85%EB%A0%B9%ED%98%95%20UI%20%EA%B5%AC%EC%84%B1%20%EB%B0%A9%EC%8B%9D%EC%9D%98%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4

안드로이드 [Kotlin] - Jetpack Compose 시작 (명령형 UI 구성 vs 선언형 UI 구성)

https://wooooooak.github.io/jetpack%20compose/2021/05/18/%EC%BB%B4%ED%8F%AC%EC%A6%88%EA%B0%80%ED%95%84%EC%9A%94%ED%95%9C%EC%9D%B4%EC%9C%A0/

Jetpack Compose가 필요한 이유(Mental Model) · 쾌락코딩