비디오 주소 : https://drive.google.com/drive/folders/1MeW7SWhNLcE7dpJr7O53HKlXei0Z6Km6?usp=sharing (오픈소스 공유 비디오 드라이브 주소)
# 1. 프로젝트 내용 설명
## 1-1. Jetpack Compose 란?
Android 9.0(API 수준 28)의 출시와 함께 Jetpack의 일부인 새로운 버전의 지원 라이브러리 AndroidX가 제공되었는데 이 라이브러리의 모음이 Jetpack이라고 생각하시면 됩니다. AndroidX 라이브러리는 기존 지원 라이브러리를 포함하며 최신 Jetpack 구성요소 또한 포함합니다. 그 전에도 라이브러리의 모음이 없던 것은 아니었습니다. Support Library라는 것이 존재하였지만 여러가지 문제점이 있었고 이 문제점을 개선한 것이 Jetpack이라 생각하시면 되겠습니다. 대표적인 부분만 살펴보면 Support Library는 패키지명과 버전 규칙이 모호했고 단일 라이브러리로 제공되었습니다. 앞서 말했듯이 이러한 문제점들을 해결하여 만들어진 것이 Jetpack이며 이 Jetpack에 새로 추가된 도구 키트가 Compose입니다.
## 1-2. Jetpack Compose 의 장점
### 1) XML 파일이 아니 코드로 UI를 개발
오랫동안 xml 파일을 이용한 UI와 코드를 연결하는 방법은 꾸준히 개선되어왔습니다. 하지만 Jetpack Compose가 나오게 된 근본적인 원인은 xml파일을 사용한다는 그 자체입니다. Xml로 UI를 그릴 경우 중간에는 여러분이 잘 아시는 findViewById 같이 중간 역할을 하는 계층이 존재를 해야합니다. 아이디를 가지고 UI를 부르고 어떤 UI가 포함되는지 알아야하기 때문에 유지보수가 어려운 Tightly coupling, 즉 강한 의존성을 갖게 됩니다. 시간이 많이 흐른 뒤 이를 유지, 보수, 수정하고 싶을 때 그에 연관을 갖는 코드들의 수정이 이뤄져야 하며 이는 런타임 에러를 발생시킬 확률을 높이게 됩니다.
### 2) 강력한 성능을
Compose Develop 문서에서 Compose를 사용해야 하는 문서를 보면 이러한 말이 적혀있습니다. "Compose는 선언적 UI보다 더 많은 문제를 해결하기도 했으며 접근성 API, 레이아웃 등 모든 항목이 개선되었습니다. 만들고 싶은 것과 실제로 만드는 것 사이의 차이가 줄어듭니다.” 이는 Android 플랫폼 API에 직접 액세스하고 머티리얼 디자인, 어두운 테마, 애니메이션 등을 기본적으로 지원하여 앱을 만들 수 있다고 할 수도 있겠습니다. 또한 머테리얼 디자인과 자체 디자인을 분리하여 머테리얼 기반에서 갖는 디자인 요구사항에서 벗어날 수 있습니다.
### 3) 이 외
이 외에도 직관적이고 UI 코드들의 합성을 통해 상속을 피하는 등 여러 장점이 있습니다.
## 1-3. 기본적인 Jetpack Compose 함수 설명
### setContent
setContent 블록은 Composable 함수가 호출되는 Activity의 레이아웃을 정의합니다. Composable 함수는 다른 Composable 함수에서만 호출할 수 있습니다. 간단하게 설명하자면 이 Composable 함수가 UI 화면을 구성하게 해주는 함수라고 이해해주시면 되겠습니다.
### Preview (@Preview)
Preview 어노테이션을 활용하여 화면을 미리보기할 수 있습니다.
### Composable (@Composable)
Composable 어노테이션은 이것이 Composable 함수를 나타내고 그 후 함수를 작성하듯이 적어주면 화면을 구성할 수 있는 함수가 완성됩니다.
### Text (Composable function)
Text 함수는 말 그대로 문자를 화면에 나타내는 함수이며 레이아웃을 정의하는 함수 속에 들어있지 않고도 여러 개를 사용할 수 있으나 여러 component들이 중첩되어 나타나게 됩니다.
### Layout funtion
화면의 정렬하는 함수를 사용하는데 대표적으로 Column, Row와 같은 함수들이 있습니다. Column 함수를 사용하면 component를 수직으로 정렬할 수 있고 Row를 사용하면 항목을 수평으로 정렬할 수 있습니다. 위에 계속 component들을 쌓고 싶다면 Box를 이용하면 됩니다.
### Modifier (Composable function property)
Component의 간격이 균등하지 않고 너무 크거나 할 때에는 modifier를 사용합니다. Modifier는 Composable을 장식하거나 구성합니다. 이를 통해 Composable의 크기, 레이아웃, 모양을 변경하거나 요소를 클릭 가능하게 만드는 등의 상위 수준 상호작용을 추가할 수 있습니다. 또한, 이러한 Modifier를 연결하여 더 복잡한 Composable을 만들 수 있습니다.
## 1-4. Remember
### 1) composition
간단하게 Jetpack Compose에서 현재 상태에 따라 화면을 구성하는 것을 composition라고 합니다. 또한 re-composition은 데이터가 변경될 때 컴포지션을 업데이트하기 위해 컴포저블을 다시 실행하는 것을 말합니다. Composable 함수는 remember Composable을 사용하여 메모리에 단일 객체를 저장할 수 있습니다. remember에 의해 계산된 값은 초기 composition 중에 composition에 저장되고 저장된 값은 re-composition중에 반환됩니다. remember는 변경 가능한 객체뿐만 아니라 변경할 수 없는 객체를 저장하는 데 사용할 수 있습니다.
### 2) stateful, stateless
Composable 은 두 가지 타입으로 나눠집니다. 상태를 가지고 있는 Stateful Composable 그리고 상태를 가자지 않는 Stateless Composable 입니다.
Stateful Composable 은 상태가 변하게 되면 자기 자신과 자식의 Composable 을 재구성하게 됩니다. Stateless Composable 은 상태가 없기 때문에 스스로 재구성을 할수 없으며 부모의 Composable이 재구성되어야 자신이 재구성을 하게 됩니다.
### 3) remember 소개
Composable 은 상태에 따라 UI를 구성하고 Composable 은 함수이기 때문에 상태값을 지역 변수로 저장하면 재구성이 될 때마다 함수가 새로 호출이 되기 때문에 지역 변수에 저장된 상태 값은 소실이 됩니다. 따라서 재구성 즉 Composable 함수가 호출이 되어도 상태 값을 계속 유지를 해야합니다. 이를 지원하는 것이 바로 remember 입니다.
### 4) MutableState
Composable에서 상태를 저장하고 상태가 변경이 되었을 때 재구성을 하기 위해서는 관찰가능한 객체를 사용하게 됩니다.
이를 위해 MutableState<T> 를 사용하며 만약 State를 업데이트를 하게 된다면 해당 State를 관찰하고 있는 해당 Composable 를 재구성하게 됩니다. MutableState<T> 를 생성하기 위해서 mutableStateOf() api를 사용하게 됩니다.
### 5) MutableState 선언 방법
• val mutableState = remember { mutableStateOf(default) }
• var value by remember { mutableStateOf(default) }
• val (value, setValue) = remember { mutableStateOf(default) }
이러한 선언은 동일한 것이며 서로 다른 용도의 상태를 사용하기 위한 형태로 제공됩니다. 작성 중인 컴포저블에서 가장 읽기 쉬운 코드를 생성하는 선언을 선택해야 합니다.
## 안드로이드 스튜디오 사용 예제
### 방식
MainActivity: 앞에서 봤던 MutableState 객체를 선언하는 방법에서 by 위임을 하는 방식을 사용하였고 text 변수는 초기에 “Start”라는 스트링 값을 갖습니다.
TextBox라는 Composable 함수를 호출하였고 안의 인자로 레이아웃에서의 최대 가로 길이를 갖는fillMaxWidth와 300dp의 높이를 가지도록 height(200.dp)의 modifier를 넣어주었고 updateText라는 인자에 text를 it 값으로 바꾸는 함수를 넣어주었습니다.
TextBox(Composable 함수): 인자로 modifier와 updateText라는 함수를 받고 Box라는 함수에 modifier로 background 색으로 파란색, Box를 클릭할 경우 발생하는 이벤트를 정의하는 clickable을 넣어주었습니다. Clickable 내에는 updateText 함수를 사용하였고 인자로는 “changed” 라는 String을 넣어주었습니다.
### 결과
파란색의 Box를 누르면 "Start" 에서 "changed" 라는 글자로 바뀐다. remember으로 선언하지 않고 그냥 String 으로 선언하였을 때는 버튼을 눌러도 바뀌지 않는다.
# 2. 프로젝트 진행 과정 보고
## 1. 프로젝트 사용 툴
- 안드로이드 스튜디오: Jetpack Compose 시연 과정과 ppt에 들어갈 사진을 캡처하는데 사용하였습니다.
- 프리미어 프로: 편집을 위해 사용하였습니다.
- PPT: 발표를 하는 툴로 사용하였습니다.
- Windows 캡처: 녹화를 하는 툴로 사용하였습니다.
## 2. 진행과정 및 결과 보고
- 대부분의 과정은 따로 프로젝트를 생성하여 간단한 테스트 코드를 만들어 진행하였고 일부 과정 중 설명은 Android Developers에서 제공하는 문서를 참고하여 재가공하였습니다.
- 대부분의 과정은 정말 처음 Jetpack Compose를 접하는 사람들을 대상으로 작성되었습니다.
- remember은 Jetpack Compose 에서부터 사용하는 함수이며 Jetpack Compose 에서는 자주 사용하는 함수이기에 Jetpack Compose 와 함께 설명하게 되었습니다.
