[Android-Compose] 안드로이드 컴포즈 1편(컴포즈란?)

이번 공부 내용 시리즈는 예전부터 꾸준히 언급되고 있는 Jetpack Compose에 대해 공부해 보겠다.

# 컴포즈(Compose) 란?

우선 공식문서에 적힌 컴포즈에 대한 설명을 보면 아래와 같이 설명하고 있다.

Jetpack Compose는 Android를 위한 현대적인 선언형 UI 도구 키트입니다. Compose는 프런트엔드 뷰를 명령형으로 변형하지 않고도 앱 UI를 렌더링 할 수 있게 하는 선언형 API 를 제공하여 앱 UI를 더 쉽게 작성하고 유지 관리할 수 있도록 지원합니다. 이 용어에 관해 몇 가지 설명이 필요하며, 앱 디자인에 있어 중요한 함의를 갖습니다.

- XML레이아웃 대신 선언형 함수를 사용하여 UI를 구성
- UI 개발 효율성을 극대화하기 위하여 개발됨
- State로 UI를 동기화하여 버그 방지
- Kotlin 으로 개발되었으며 Material Design을 기반으로 함
이렇게 정리를 할 수 있다.

# 컴포즈(Compose)의 장점

우선 이 부분도 자세히 보고 싶다면 공식문서를 참고 하길 바란다

1. 코드 감소
- 적은 수의 코드로 더 많은 작업을 하고 전체 버그 클래스를 방지할 수 있으므로 코드가 간단하며 유지 관리하기 쉽다.
- 기존에 XML에 View를 그리고, Activity에서 findViewById, ViewBinding, DataBinding을 통해 View 객체에 접근하는 경우, 약간의 수정으로 반복적으로 재사용되는 보일러 플레이트 코드가 생기게 된다.
Ex) 기존에 RecyclerView를 구성하기 위해서 Adapter를 연결하고 LayoutManager를 연결해주는 등 여러 작업이 필요했다.
하지만 Compose에서는 LazyColumn이라는 Composable을 통해 간단히 리스트 형태의 View를 구현할 수 있다.

2. 직관적
- Compose는 선언적 API를 사용합니다. 즉, Compose가 나머지를 처리하므로 UI를 설명하기만 하면 된다.
- 앱 상태가 변경되면 UI가 자동으로 업데이트가 된다.

3. 빠른 개발 과정
- 기존의 모든 코드와 호환되므로 언제 어디서든 원하는 대로 사용할 수 있다.
- 실시간 미리보기를 제공하기 때문에 코드를 더 빠르게 반복하고 제공할 수 있다.

4. 강력한 성능
- Compose는 Android 플랫폼 API에 직접 접근하고 Material Design, Dark Theme, Animation 등을 기본적으로 지원하여 멋진 앱을 만들 수 있다.

# 컴포즈(Compose)의 생성 및 구성

## 프로젝트 생성

우선 New Project에서 Empty Compose Activity로 새로 만들어 준다.
※ 이미 만들어진 xml에서 컴포즈를 적용하려면 공식문서를 참고하길 바란다.

## MainActivity 구성

새 프로젝트를 만들면 MainActivity는 이런 식으로 구성이 되어있다.
여기서 생소한 어노테이션이 있다.

1. @Composable : 기존의 View의 역할. 실행 시 컴파일러에게 UI를 그리게 하며, 반환 타입을 정하지 않고 순서를 신경 쓰지 않으며, 동시 실행 가능하고 갱신, 취소될 수 있다.
2. @Preview : 레이아웃 미리 보기 지원한다(showbackground = true 라면 기본 배경색을 하얀색으로 채워준다)

## 클래스 구성

테마를 구성하는 Class는 크게 Color, Shape, Theme, Type가 있다.

### Color

Material Design을 기본으로 하는 컬러들이 선언되어 있는 클래스이다.
여기서 컬러를 지정해 추가 후 커스텀할 수 있다.

### Type

기본 텍스트 타입이 정의되어 있다.
텍스트 폰트, 사이즈 등 커스텀을 하고 싶다면 여기서 정의해주면 된다.

### Theme

테마를 구성하는 클래스이다
Color에 정의되어 있는 컬러를 바탕으로 다크 테마, 기본 테마를 정의한다.
나머지 클래스와 마찬가지로 여기서 테마를 커스텀할 수 있다.

지금까지 컴포즈의 전반적인 구조를 알아봤다. 다음 공부 노트는 이제 본격적으로 컴포즈의 A-Z까지 달려보도록 하겠다.

참조 문서
https://developer.android.com/jetpack/compose
https://hanyeop.tistory.com/257