Jetpack Compose 간단하게 알아보기 (Android에서 React 처럼 선언식으로 UI 작성하기)

• Jetpack Compose는 기존의 XML로 작성하던 안드로이드 앱 UI 개발을 간소하고 빠르게 만들어주는 도구이다.
• Jetpack에 포함된 Compose는 선언적인 방식으로 UI를 구성하고, State의 변경에 따라서 자동으로 UI를 업데이트한다.
• Preview의 지원으로 개발 도중에 미리 화면을 확인할 수 있고, 핫 리로딩이 지원된다.
• 기존의 모든 코드와 호환되기에, 부분적으로 적용할 수도 있다.
• Andorid 플랫폼 API에 직접 접근하기에 성능적으로도 뛰어나다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
           Column(modifier = Modifier.fillMaxSize()) {
               Text(text = "Hello World")
           }
        }
    }
}

Jetpack Compose는 XML 파일을 생성하지 않고, 바로 코틀린 파일에서 UI를 작성할 수 있다.

 

State에 데이터를 저장하고, 이 State의 값이 변경되었을 때 UI는 다시 그려지게 된다.

@Composable 어노테이션을 통해서 Compose 함수, 즉 컴포넌트를 생성할 수 있다.

@Composable
fun StateScreen() {
    val str: MutableState<String> = remember {
        mutableStateOf("Hello World")
    }
    Column {
        Text(str.value)
        Button(onClick = {
            str.value = "~~~~~~~~~~~~~~~~~~~"
        }) {
            Text(text = "Click")
        }
    }
}

버튼을 클릭하면 화면의 보여지는 Text가 변경된다.

 

👏 위의 코드는 가로 모드가 되면 상태 값이 초기화될 수 있는데, 이 경우 remeber 대신 rememberSaveable을 사용할 수 있다.

🤚 by 키워드를 사용하여 상태값을 더 편하게 사용할 수 있다. (.value대신 직접 접근 가능)

👏 viewModel을 사용하여 상태를 관리할 수도 있다.

 

Compose는 material 3를 지원하기에 더 간편하게 UI를 구성할 수 있다.

 

Modifier를 통해서 스타일을 지정할 수 있고 horizontalAlignment, verticalArrangement을 통해서 요소를 정렬할 수 있다.

@Composable
fun StyleBasic() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.Red)
            .padding(15.dp)
            .clickable { 
                println("Click")
            },
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceAround
    ) {
        Text("Test Style")
    }
}

modifier에 clickable을 설정하여 해당 요소를 클릭할 수 있게 만들 수 있고, 이벤트를 연결할 수 있다.

 

Row는 가로로 컴포넌트를 쌓고 Column은 세로로 컴포넌트를 쌓는다.

Box는 z축으로 겹쳐서 컴포넌트를 쌓을 수 있다.

 

 

⛄️ 참고 문서

https://developer.android.com/jetpack/compose?gclid=Cj0KCQjw_5unBhCMARIsACZyzS3qkLYG82uEpdVJe6ykWT6qDzrHhlRPn4-HCdJbApx9CWiRDDRAShMaAqa-EALw_wcB&gclsrc=aw.ds&hl=ko 

Jetpack Compose UI 앱 개발 도구 키트 - Android 개발자  |  Android Developers