🔥TIL🔥Jetpack Compose | Component

📖 Compose란?

Xml이 아닌 Kotlin 문법으로 view를 정의.
View와 동작의 상호관계, 상태 관리를 진행할 수 있는 API를 프레임워크가 제공해줌

---

🤔 Compose를 왜 사용하는가?

1. 적은 코드량

계층 구조로 표현이 XML에 비해 간결하다.
데이터가 바인딩 된 구조이기 때문에 뷰를 직접 찾아서 데이터를 변경해주지 않아도 된다.

2. 직관적인 코드

선언형 UI 방식으로 순수하게 UI 표현에만 집중하기 때문에 직관적.
컴포즈 표현에 자동 바인딩 되어 더 이상 뷰의 상태를 수작업으로 변경하지 않아도 된다.

3. 생산성 향상

Navigation, ViewModel, Coroutine 등 프레임워크 레벨에서 적극적으로 지원한다.
코드에서 동적으로 뷰 로직 적용이 가능하다.

4. 강력한 도구 지원

MaterialDesign, Theme 등 디자인 측면에서 간편한 API 구조와 다양한 기본 기능을 제공한다.
Animation API가 강력해졌다.

---

📝 Declarative UI (선언형 UI)

• 오로지 어떤 UI를 만들어야 하는지에만 집중하는 UI 개발 방법론

선언형 UI는 오로지 뷰가 어떤 상태로부터 데이터를 받는지, 뷰에서 어떤 이벤트가 발생하는지에만 관심이 있음
개발자는 View에 State를 바인딩하고 이벤트가 발생했을 때 상태를 변경해주는데 집중

@Composable
fun Gretting() {
	val name by remember { mutableStateOf("Ethan") }
    val count by remember { mutableStateOf(1) }
    
    Column {
    	Text(text = "Name: $name")
        Text(text = "Count: $count")
    }
|

name, count가 언제 어떻게 바뀌는지 UI는 전혀 관심 없다.

명령형 UI : name 상태가 바뀌면 개발자가 setText로 뷰에 text를 직접 바꾼다.
선언형 UI : 텍스트에 name 상태가 바인딩 되어 있다. name이 바뀌면 UI가 알아서 바꾼다.

💡유지보수 측면에서 개발자가 신경써야 할 데이터와 상태 연결을 손쉽게 해결해줌

원리 : 뷰를 매번 새로 그림

---

📝 Compose UI 작성하는 방법

✋ @Composable 함수

• 컴포즈 뷰를 의미.
• Composable은 합성의 대상이 되는 구성 요소
  ex) 레고 조각
• Composable은 단독으로도 뷰가 될 수 있고 여러 Composable로 합성된 뷰가 될 수도 있음
  ex) 레고 조각을 조립하는 것을 연상

✋ 함수 규칙

• @Composable을 설정해야 컴파일러가 컴포즈 뷰로 인식할 수 있다.
• 다른 컴포저블 함수를 호출해서 계층 구조를 표현
• 리턴을 하지 않음
• Idempotent 해야 함

📝 Compose 내장 컴포넌트

✋ 1. Text

xml의 TextView

• text 속성 하나만 필수 인자

xml과 마찬가지로 프레임워크 차원에서 문자, 버튼, 레이아웃 등 기본 컴포넌트를 제공

✋ 2. Button

xml의 Button

• 클릭할 때 수행할 onClick 람다와 버튼 내부의 뷰를 설정할 content를 필수로 설정해야 함
• 내부 뷰를 포함한 개념이 아니라 별도로 내부 뷰를 작성해서 넣어줘야 함
• xml에서는 뷰가 상속을 통해 만들어졌다면 컴포즈는 확장을 통해 만드는 것을 원칙으로 함

✋ 3. TextField

xml의 EditText

• value와 onValueChange가 필수 인자
• 선언형 UI의 특성상 UI는 데이터 바인딩과, 이벤트 방출 두 가지만 집중

@Composable
fun Gretting() {
	var name by remember { mutableStateOf("") }
    TextField(
    	value = name,
        onValueChange = { name = it }
    )
}

1. 데이터 바인딩 : TextField의 value = name
2. 이벤트 방출 : value가 바뀌면 onValueChange 이벤트 발생

✋ 4. Layout - Column

xml의 LinearLayout(orientation = vertical)

• verticalArrangement : 수직 방향 정렬
• horizontalAlignment : 수평 방향 정렬

@Composable
inline fun Column(
	modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
) {

5. Layout - Row

xml의 LinearLayout(orientation = horizontal)

• horizontalArrangement : 수평 방향 정렬
• verticalAlignment : 수직 방향 정렬

@Composable
inline fun Row(
	modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable RowScope.() -> Unit
) {

6. Layout - Box

xml의 FrameLayout

• contentAlignment ; 컨텐츠 정렬
  propagateMinConstraints : 최소 사이즈 제약 조건 전파 여부(자식이 부모의 최소 사이즈를 기반으로 설정되어야 하는 경우 사용)

@Composable
inline fun Box(
	modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable BoxScope.() -> Unit
) {

---

✋ List

7. List - LazyColumn

수직 방향 리스트를 위한 컴포넌트
모든 리스트의 뷰를 생성하지 않고 필요한만큼 뷰를 생성

LazyColumn {
    val numbers = (0..100).toList()
    items(numbers){
        Text(
            text = "Number: $it",
            modifier = Modifier.height(200.dp)
        )
    }
}

XML View에 연관된 Compose Component

---

📝 Modifier

컴포넌트들을 꾸미는데 사용되는 수정자

@Composable
fun ModifierTest1(name: String){
    Column(
        modifier = Modifier
            .size(300.dp)
            .padding(24.dp)
            .fillMaxSize()
            .clickable { Log.d("TAG", "clicked!") }
    ){
        Text(text = "Hello")
        Text(text = ", $name")
    }
}

✋Modifier로 자주 쓰는 기능

1. size

2. padding

3. fillMaxSize

4. clickable

Modifier는 기본적으로 먼저 호출된 설정이 우선이므로 padding을 설정하고 Modifier을 clickable보다 먼저 작성하면 padding 설정 전 사이즈만큼 클릭 영역이 설정된다.