Android와 선언형 UI : Jetpack Compose

0️⃣ 드디어, Jetpack Compose다!

 Jetpack Compose를 공부하기만을 얼마나 고대해왔는지, 드디어 공부를 시작했다. 대부분의 선언형 UI가 비슷하듯이 Jetpack Compose도 예외는 아니다. 구글 공식 유튜브 강의를 들어 선언형 UI의 개요에 대해서 자세히 공부하고 Jetpack Compose에 대해서도 차차 알아가보겠다. 한글 자막도 잘 되어있으므로 꼭 한 번 시청하면 많은 도움이 될 것이다. 내가 앞으로 쓸 내용은 위 영상을 내가 이해한대로 정리한 요약본이다.

 

1️⃣ 선언형 UI에 대해서

 선언형 UI가 정말로 대세다. Jetpack Compose를 대표해서, Swift UI, React(React Native), Flutter 등 모두 선언형 UI를 사용하고 있다.

 기존 XML, HTML 등 명령형 UI를 사용하게 되면 상태값이 바뀔 때마다 UI를 새로 그려줘야 했다. 그렇게 되면 각각의 View 마다 또 각각의 데이터를 가지고 있었다. 상태값이 새로 들어오면 이를 바탕으로 새롭게 UI를 업데이트 하여 동기화를 해주어야 하는데 이 과정이 매우 복잡하여 생산성이 낮아졌다. 특히 프로젝트가 커지면 커질 수록 유지보수가 어려워지고 버그도 많이 발생하여 관리가 어려웠다. 하지만 요즘 앱들은 점점 더 다이나믹 해지고 데이터가 동적으로 바뀌고 있어 실시간으로 업데이트를 해주어야 한다.

 더 이상 비효율적인 개발을 그만하기 위해 등장한 것이 바로 선언형 UI, Android에서는 Jetpack Compose인 것이다.

 선언형 UI는 상태값, 데이터값 그 자체를 UI로 구현한 것이다. 여기서 생성한 이 UI는 Immutable 하여 변경할 수 없고 한 번 생성하면 업데이트가 불가능하다. 때문에 새로운 데이터가 들어오면 새로운 UI를 그려냄으로서 동기화 문제로부터 벗어나고 보다 효율적으로 화면을 구현할 수 있다. 그리고 변경되지 않는 상태가 있다면 이 UI는 건너뛰고 화면을 새로 그리기도 하며, 이렇게 화면을 다시 그리는 행위를 리렌더링(안드로이드에선 리컴포징)이라고 부른다.

2️⃣ Composable?

 Compose를 사용하기 위해선 Composable이라는 어노테이션을 이용하여 함수를 선언해주면 된다.

선언형 UI의 공식

 이 Composable 함수는 단순히 값을 리턴하는 함수하는데, 대신 그 리턴값이 UI일 뿐이다. 위의 공식을 보면 쉽게 이해할 수 있다. Flutter로 비유하자면 Composable 함수가 곧 Widget인 것이다. Composable 함수는 말 그대로 "함수"이기 때문에 매개변수를 받을 수 있고 데이터값을 UI로 변환할 때 유용하게 쓰인다.

 각 Composable은 Immutable 하여 Composable을 직접 참조하거나, 나중에 쿼리하거나, 내용을 업데이트할 수 없다. 따라서 변경할 내용이 있다면 함수의 매개변수로 모두 전달 해주어야 한다.

 Compose는 직접 데이터를 observing 하고 있지 않아도 컴파일러가 스스로 추적하고 있어서 상태가 바뀌면 UI를 리턴하고 있는 Composable 함수가 자동으로 실행된다. 또 이 컴파일러는 변경할 컴포저블만 실행하고 나머지는 건너뛴 채로 화면을 새로 그린다.

3️⃣ Jetpack Compose의 특징

• Kotlin으로만 개발됨
• Hot Reload 되지 않는 대신 UI 컴포넌트 미리보기를 제공
• Material UI 사용 가능
  • 기본 Button, Cards 등의 컴포넌트를 제공하고 있기 때문에 모든 기본 구성 요소는 Material 스타일링을 따르고 Material Them도 제공하고 있어 편리함
• Row, Column, Box등의 레이아웃을 제공
• 효과적이고 간단한 애니메이션 UI
• 코루틴을 사용하면 간단한 비동기식을 작성할 수 있음 ex) 제스처, 애니메이션, 스크롤링...
• 여러가지 아키텍처와 호환되지만 단방향 데이터 흐름을 따르는 아키텍처와 가장 잘 맞음

4️⃣ Flutter와의 비교?

 역시 부모가 같은 Google이라서 그런지 기본적인 Widget Tree 구조라던지, 변경된 컴포넌트 (Widget, Composable)만 교체하여 리렌더링 하는 등 상당히 유사한 부분이 많다. 아직 Jetpack Compose를 통해 개발해본 적은 없지만 다른 점을 파악하고 서둘리 학습해보고 싶다. 이론 공부는 여기까지하고, 실전에 돌입하여 직접 작성해보며 느낀점을 기재하겠다. (추후에...)

 

❗ 출처

참고 사이트1 : https://medium.com/@kimdohun0104/사람들은-왜-선언형-ui에-열광할까-1440d03f4e49

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