[Compose Study] Compose 기본사항 - 1

* 컴포즈 강의를 구매할까 책을 살까 하다가 안드로이드 공식문서에 강의와 codelab으로 따라 칠 수 있는 코스가 있길래 동기들과 같이 스터디를 하며 블로그에 정리를 하기로 했다.

(https://developer.android.com/courses/pathways/jetpack-compose-for-android-developers-1?hl=ko)

 

1. Compose 이해

- Jetpack Compose는 선언형 UI 프레임워크이다. UI에 포함되어야 하는 내용을 설명하면 Compose가 나머지를 처리한다.

이러한 UI 작성 방식은 기존의 우리가 작성하던 방식(XML 사용)과 매우 다르다. View를 사용하면, UI가 특정 방식으로 보이도록 하는 방법을 단계별로 설명한다. XML에서 UI를 정의하고, 코드에서 XML의 뷰를 찾은 다음, setter 함수를 호출하여 UI가 원하는 대로 보이도록 하면 된다. Compose를 사용하면 더 이상 XML을 작성할 필요가 없다.

Compose와 View의 주요 차이점은 UI를 어떻게 구성할 것인가가 아니라 무엇으로 구성할 것인가 이다.

 

* 아래와 같은 view를 만든다고 해보자.

- XML코드

// XML코드는 생략

class SurveyQuestionActivity: Activity() {
	override fun onCreate(~~~) {
    	val image = binding.ivAnswer
        val text = binding.tvAnswer
        val radioButton = binding.rbAnswer
        
        image.setImage(...)
        text.setText(...)
    }

}

 

- Compose 코드 (compose에서는 ui와 xml을 왔다갔다 할 필요가 없다)

@Composable
fun surveyAnswer(answer: Answer) {
	Row {
    	Image(answer.image)
        Text(answer.text)
    	RadioButton(false, onClick = { /* ... */ })
    }

}

 

 

* Compose에서 UI 요소는 객체가 아닌 함수이다. 이는 해당 항목에 대한 참조를 찾을 수 없으며 해당 항목을 변경하는 메서드를 호출할 수 없음을 의미한다. 대신 UI 요소는 전달하는 상태 또는 인수에 의해 완전히 제어된다. 여기서는 UI가 어떤 모습이어야 하는지 설명한다. 

 

* 위에서 RadioButton 안에 매개변수에 체크상태를 나타내는 false변수가 있다. 우리가 radioButton을 누른다고 해서 view의 상태가 바뀌지는 않는다. 이것이 어떻게가 아니라 무엇을 의미하는 것이다. 우리는 UI가 작동하는 데 필요한 상태를 제공함으로써 UI가 어떤 모습이어야 하는지 선언한다. 하지만 Compose가 해당 상태를 렌더링하는 방법을 알려주지는 않는다. 

* 따라서 상태가 UI를 제어하는 경우 UI를 업데이트하기 위해 상태를 업데이트하는 방법은 무엇일까??

 - Compose는 Event를 통해 이를 수행한다. 사용자가 UI요소와 상호작용하면 UI는 클릭과 같은 이벤트를 발생시킨다. 그런 다음 Event Handler는 UI 상태를 변경해야 하는지 여부를 결정할 수 있다. UI 상태가 변경되면 해당 상태에 의존하는 기능 또는 UI 요소가 다시 실행된다. 상태가 변경될 때 UI를 다시 생성하는 이 프로세스를 Recomposition(재구성)이라고 한다.

 

 

* 상태를 UI로 변환하고 상태 변경으로 인해 UI가 재생성되는 프로세스는 Compose가 UI 프레임워크로 작동하는 방식의 핵심이다. 

 

* 라디오버튼을 누를때마다 선택이 바뀌게 하는 코드

fun SurveyAnswer(answer: Answer) {
  Row {
    var selected: Boolean
    RadioButton(selected, onClick = {
      selected = !selected
    })
  }
}

 

 

* 정리하자면 Compose에서는

1. UI에 포함할 내용을 선언(이를 수행하는 방법을 단계별로 알려주지는 않는다), 

2. Kotlin 함수를 사용하여 UI 요소를 나타내고,

3. UI를 제어하기 위해 상태를 전달한다.

4. 이벤트를 사용하여 상태를 업데이트하고 UI를 업데이트한다.

 

 

 

* 출처

https://developer.android.com/courses/pathways/jetpack-compose-for-android-developers-1?hl=ko

Compose 기본사항  |  Jetpack Compose for Android Developers - Compose essentials