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

Android

🤖 Play with Android 🤖 2023. 4. 9. 19:27

728x90

Jetpack Compose의 탄생이유

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

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

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

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

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

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

Less Code - 코드 감소

Intuitive - 직관적

Accelerate Development - 빠른 개발 과정

Powerful - 강력한 성능