심기일전 코틀린! - 02. Jetpack Compose (2)

이전 시간에 이어서 Compose 를 써야하는 이유에 대해 알아보자.

 

2) 직관적인 API

말로 들으면 어려운 단어들의 조합이지만 쉽게 말해서

데이터의 변경점이 UI에 즉각적으로 반영된다는 뜻이다.

기존 xml 방식 레이아웃에서도 DataBinding과 LiveData를 사용함으로써

어느정도 구현이 가능했지만

Compose에서는 State라는 개념으로 더욱 쉽게 구현이 가능하다.

@Composable
fun App() {
	//State 변수
	val text by remember { mutableStateOf("unClicked") }
    Column() {
    	//처음 화면에 등장하면 unClicked로 표시된다
    	Text(text=text)
        //버튼을 클릭하면 text의 value값이 Clicked로 변하면서 Text에도 즉시 반영
        Button(onClick = { text = "Clicked" }) {
            Text(text = "button")
        }
    }
}

 

3) 빠른 개발 과정

Compose는 기존의 xml방식의 레이아웃 구성과 혼용하는것이 가능하기때문에

기존 프로젝트 전체를 마이그레이션한다거나 그럴 필요가 전혀 없다.

아래는 Compose 레이아웃에서 기존 xml 방식 WebView를 사용하는 예시이다.

val url = "https://eitu97.tistory.com/"

@SuppressLint("SetJavaScriptEnabled")
@Preview
@Composable
fun App() {
    Box(modifier = Modifier.fillMaxSize()) {
        AndroidView(
            factory = { context ->
                WebView(context).apply {
                    //웹뷰 세팅
                    settings.javaScriptEnabled = true
                    webViewClient = WebViewClient()
                }
            },
            update = { webView ->
                CoroutineScope(Dispatchers.Main).launch {
                    webView.loadUrl(url)
                }
            },
            modifier = Modifier.fillMaxSize()
        )
    }
}