[패스트캠퍼스] UPSKILL : 상위 1% 개발자들의 생산성 향상을 위한 Jetpack Compose

Compose

목록 보기

1/5

본 Compose 시리즈 패스트 캠퍼스에서 Compose 강의를 듣고 정리한 글입니다.
추후 제가 다시 보기 위해 작성한 글이며 각 컴포넌트를 어떻게 활용하는지 예시를 볼 수 있습니다. 수정할 부분이나 좋은 내용을 댓글로 공유해주신다면 감사하겠습니다. 😊

Compose 기초
- 컴포즈의 특징과 강점을 알아보고 이론적인 베이스를 쌓는 시간입니다.
Compose 콤포넌트
- 컴포즈에는 어떤 컴포넌트가 있고 텍스트부터 그 컴포넌트를 활용하는 법을 알아보도록 합시다.
- Text, Button, Modifier, Surface, Box, Row, Coil 라이브러리 ... 등 카탈로그 앱 실습
Compose 활용
- 상태를 이용하는 방법이나 애니메이션, 부수 효과에 대해 알아봅시다.
  - Recomposition, ConstraintLayout, Canvas, Dialog, DropDownMenu, State, State Hoisting, 애니메이션, 부수효과, To Do 앱 구현하기
Compose 아키텍처
- 컴포즈의 필요성과 강점이 무엇인지 알아보고, 실제 유즈케이스를 통해서 어떤 형태로 컴포즈가 사용되고 있는지 알아보자. 컴포즈가 선언형 UI 툴킷인데 이 개념들이 어떤 의미를 가지고 있는지 알아보도록 합시다.
  - ViewModel, LiveData 연동, CompositionLocal, Theme, Unidirectional Data Flow, 의존성 주입, 포켓몬 앱 예제

🦾Compose 기초

compose의 몇가지 장점

상호작용
- 컴포즈는 기존 앱과 상호작용 가능함
- View들을 컴포즈 UI 안데 넣을 수 있고 컴포즈를 뷰 안에 넣을 수 있음.
젯팩 통합
- Compose는 Jetpack과 통합되도록 설계됨.
- Navigation, Paging, LiveData, Flow/RxJava, Viewmodpel. Hilt
머터리얼
- 머터리얼 디자인 컴포넌트와 데마를 제공
- 아름다운 앱을 만들고 브래드를 표현
- 복잡한 XML을 다루지 않고 이해하기 쉽고 추적하기 쉬움
그 외
- 코드 감소
  - "동일한 버튼 클래스의 경우 [코드]의 규모가 10배 더 작았습니다." - Twitter
  - "리사이클러뷰로 빌드한 모든 화면에서 상당한 감소 효과가 나타났으며, 대부분의 화면이 여기에 해당합니다." - Monzo
  - "앱에서 목록이나 애니메이션을 만드는 데 필요한 코드 줄이 이렇게 적다는 사실이 매우 기뻤습니다. 기능마다 작성하는 코드 줄 수가 줄어든 덕분에 고객에게 가치를 제공하는 데 더욱 집중할 수 있게 되었습니다." - Cuvva
- 코드 추적하기에 좋음
  - "Kotlin과 xml 사이를 전환하는 것이 아니라 모든 것이 같은 언어로 종종 같은 파일에서 작성되면 코드를 추적하기가 훨씬 쉬워집니다." - Monzo
- 코드 가독성
  - "Compose의 레이아웃 시스템은 개념적으로 더 단순하기 때문에 추론하기도 쉽습니다. 복잡한 구성요소의 코드도 쉽게 읽을 수 있습니다." - Square
  - "테마 레이어가 훨씬 더 직관적이고 읽기 쉽습니다. 멀티 레이어 테마 오버레이를 통해 속성을 정의하고 할당하는 여러 XML 파일로 확장해야 했을 일을 단일한 Kotlin 파일 내에서 당설할 수 있었습니다." - Twitter
  - "사용 및 유지관리가 쉽고 구현/확장/맞춤설정이 직관적인 스테이트리스 UI 구성요소의 새로운 세트를 제공하겠다는 목표를 세웠습니다. Comose는 이를 위한 좋은 해답이었습니다." - Twitter
  - "추론하는 동안 기억해야 하는 사항이 줄어들고 통제를 벗어나거나 제대로 이해하지 못하는 행동도 적어집니다." - Cuvva

선언형 UI

강의에서도 선언형 UI에 대해 설명하고 있지만 나는 사실 강의를 들으면서도 선언형 UI가 무엇인지 와닿지 않았다.

사전적인 의미: "어떻게 무엇을 할지" 대신 "무엇을 하는지" 기술하는 법
UI = f(state)라고도 이야기함.

그게 뭐죠?

선언형이 뭐예요?

React의 선언형 정의
인터액티브한 UI를 고통업시 만들게 함.
앱에서 각 상태의 심플한 뷰를 디자인하면, 데이터가 변경될 때 리액트가 효율적으로 갱신하고 필요한 구성 요소만 렌더링함.

HTML이나 기존 안드로이드 View 시스템은 선언형 UI툴킷이라 말하기 어려움.

React, Android, Swift 선언형

React(2013)가 선언형 UI 방식을 제안 후 업계의 여러 도구들이 받아들임
Flutter(2017)-Google의 클로스플랫폼 프레임워크
SwiftUI(2019)-iOS의 공식적인 툴킷
Jetpack Compose(2021) - Android의 공식적인 툴킷

안드로이드 레거시 View 시스템

UI를 업데이트하기 위해 뷰 객체를 가져와야 함
- findViewById()와 같은 함수로 뷰를 찾음
뷰는 상태를 가지고 있어 함수로 상태를 가져옴
- getText()같은 함수로 상태를 가져옴
뷰의 상태를 업데이트하기 위해 여러 함수를 사용.
- setText()로 업데이트
- container.addChild()
- img.setImageBitmap()
각 컴포넌트마다 상태를 가지고 있고 이를 관리하는 것이 쉽지 않음.