[Compose Study] Compose 기본사항 - 2

* Compose에서 UI 구성요소를 만들려면 @Composable 주석을 함수에 달아줘야 한다. 이 주석은 이 함수가 데이터를 UI로 변환하므로 응답이 UI로 변환되도록 Compose 컴파일러에 알린다. 이 주석이 있는 함수를 구성 가능한 함수, 컴포저블(Composable)이라고도 한다. 이러한 함수는 Compose UI 구성 요소이다. 

 

* UI를 재사용 가능한 요소 라이브러리로 나눌 수 있다. 예를 들어, 선택할 수 있는 답변 목록을 구현하려는 경우 답변 목록을 가져오는 SingleChoiceQuestion이라는 새 함수를 정의한 위에서 정의한 SurveyAnswer 함수를 호출할 수 있다.

@Composable
fun surveyAnswer(answer: Answer) { /* ... */ }


@Composable
fun SingleChoiceQuestion(answers: List<Answer>) {
	Column {
    	answers.forEach { answer ->
        	SurveyAnswer(answer = answer)
        }
    }
}

이 구성 가능한 함수는 매개변수를 허용하므로 앱의 로직으로 구성할 수 있다. composable은 immutable하다. 호출할 때 모드 정보를 매개변수로 전달해야 한다. 

 

* Recomposition은 컴포저블이 다른 함수 매개변수를 사용하여 다시 호출될 때 발생한다. 그러나 함수의 내부 상태가 변경되는 경우에도 발생할 수 있다.

위의 SingleChoiceQuestion 함수에서 사용자가 항목을 누를때마다 true, false상태가 변경되어야 하므로 선택한 답을 보유하는 변수가 필요하다.

var selectedAnswer: Answer? = null

 

* 또한, 이 변수가 변경되면 재구성도 발생해야 함을 Compose에 알릴 수 있어야 한다. 그러기 위해서는 답변을 변경 가능한 상태 객체로 wrapping해야 한다. 

var selectedAnswer: MutableState<Answer?> = mutableStateOf(null)

* MutableState는 Compose 런타임 내에 integrated된(통합된?) observable type이다. 상태에 어떤 변화가 일어나면 해당 상태를 읽는 구성 가능한 함수에 대한 recomposition이 자동으로 예약된다. MutableState를 생성하려면 mutableStateOf 메서드를 호출하면 된다. (처음에 답변이 선택되지 않았으므로 null로 초기화를 해줌)

 

 

// 이해안가서 한번 더 보고 정리 할 부분 //

 

* Composable 함수의 속성들

1. Composable Function들은 어떤 순서로든 실행될 수 있다. compose는 일부 UI 요소가 다른 UI 요소보다 우선순위가 높다는 것을 볼 수 있다. 따라서 해당 요소가 먼저 그려질 수 있다. 아래 코드는 TabLayout에 3개의 화면을 그리는 코드이다. 우선순위가 같은 요소들 사이에서 실행은 순서대로가 아니라 어떤 순서로든 발생할 수 있다.

@Composable
fun ButtonRow() {
	MyFancyNavigation {
    		StartScreen()
        	MiddleScreen()
        	EndScreen()
    }
}

 

2. Composable Function들은 병렬로 실행될 수도 있다. 이를 통해 compose는 다중 코어를 활용하여 화면의 렌더링 성능을 향상시킨다. 

 

3. Recompostion은 가능한 한 많이 건너뛴다. Compose는 업데이트해야 하는 UI 부분만 재구성하기 위해 최선을 다한다. 컴포저블이 재구성을 트리거한 상태로 사용하지 않으면 건너뛴다. 아래 스니펫에서 이름 문자열이 변경되면 Header(), Footer()는 해당 상태에 의존하지 않으므로 다시 실행되지 않는다. 

fun GreetingScreen(name: String) {
	Column {
    	Header()
        Greeting(name = name)
        Footer()
    }
}

 

4. Recomposition is optimistic(낙관적이다). 이는 Compose가 매개변수가 다시 변경되기 전에 재구성을 완료할 것으로 예상한다는 의미이다. 재구성이 완료되기 전에 매개변수가 변경되면 Compose는 재구성을 취소하고 새 매개변수로 다시 시작할 수 있다. 

 

5. composable function은 자주 실행될 수 있다. 구성 가능한 함수에 프레임마다 실행해야 하는 애니메이션이 포함된 경우가 이에 해당한다. 그렇기 때문에 프레임 삭제를 방지하려면 컴포저블 함수가 빠른지 확인하는 것이 중요하다. 

 

 

 

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

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