Jetpack Compose UI 란?

선언적 UI 패러다임을 기반으로 하여, 개발자가 보다 직관적이고 간결한 방식으로 안드로이드 앱의 UI를 설계할 수 있게 해주며 Kotlin을 사용하여 UI 구성 요소를 작성하고 상태 변화에 따라 UI가 자동으로 업데이트

장점

• 선언적 UI: UI의 상태를 기반으로 UI를 선언하며 상태가 변경되면 시스템이 UI를 자동으로 업데이트
• 간결성: Kotlin DSL을 사용하여 더 적은 코드로 더 많은 작업을 수행할 수 있음
• 컴포지션: 작은 컴포넌트를 조합하여 복잡한 UI를 구현 가능
• 재사용성: 커스텀 컴포넌트를 쉽게 만들고 재사용할 수 있음
• 호환성: 기존 뷰 시스템과 함께 사용할 수 있으며 점진적으로 마이그레이션 할 수 있음

단점

• 라이브러리 및 도구 지원: 모든 라이브러리가 제트팩 컴포즈를 완벽하게 지원하지 않을 수 있음

• 기존 방식과의 비교 :

  • 기존 방식 (XML 기반 뷰): 레이아웃 XML 파일을 사용하여 UI를 정의하고 액티비티나 프래그먼트에서 뷰를 조작, UI와 비즈니스 로직이 분리되지 않아 복잡하다
  • Jetpack Compose: UI와 관련 로직이 Kotlin 파일 내에서 긴밀하게 결합되어 있으며 더 동적이고 반응적인 UI를 제공

이 외에도 여러가지 등이 있지만 현재는 수 많은 앱이 Jetpack Compose UI로 선언형 UI로 개발을 많이 함으로써 더욱 Jetpack을 공부하게 되었다.

---

전반적인 구성

MainActivity

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContent {
          HelloWorldTheme {
              Surface(
                  modifier = Modifier.fillMaxSize(),
                  color = MaterialTheme.colorScheme.background
              ) {
                  Greeting("Android")
              }
          }
      }
  }
}

• HelloWorldTheme: 기본 제공되는 Material 테마이며 앱 이름으로 인해 결정되고 다양한 디자인과 색상 스키마를 제공한다.

• Greeting: Greeting 함수를 호출하며 이 함수는 "Android"라는 문자열을 인자로 전달 받음
  
  

함수 호출

위에 선언 한 함수를 호출하며 해당 함수는 @Composable 어노테이션이 적용된 함수로, UI 요소를 구성한다.

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        color = Color.Red,
        text = "Hello $name!\nHello $name!",
        fontSize = 130.sp,
        fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Center,
        modifier = modifier.size(300.dp),
    )
}

Preview 함수

Android Studio에서 레이아웃의 미리보기를 제공하며 이 함수는 디자인 타임에 UI를 확인할 수 있게 해줌

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
  HelloWorldTheme {
      Greeting("Android")
  }
}

---

기본 콤포넌트 사용

머터리얼3 디자인을 기반을 하여 작성한 콤포넌트 예제

Text

화면에 텍스트를 표시, 다양한 스타일링 옵션을 제공하여 텍스트의 모양을 정의

@Composable
fun TextExmaple() {
  Text(
      "TextExmaple",
      color = Color.Red,
      fontSize = 30.sp,
      fontWeight = FontWeight.Bold,
      textAlign = TextAlign.Center,
      textDecoration = TextDecoration.Underline,
  )
}

Button

사용자 상호작용을 위한 버튼을 제공하며 onClick 람다를 통해 클릭 이벤트를 처리할 수 있음

@Composable
fun ButtonExample(onButtonClicked: () -> Unit) {
   Button(
      onClick = onButtonClicked
  ) {
      Text("클릭하세요")
  }
}

Image

이미지를 표시합니다. 로컬 리소스나 외부 URL에서 이미지를 로드 할 수 있음

@Composable
fun ImageExample() {
  Image(
      painter = painterResource(id = R.drawable.my_image),
      contentDescription = "이미지"
  )
}

Modifier

Compose의 모든 UI 요소에 공통적으로 적용될 수 있는 설정을 담당하며 크기, 배치, 패딩, 클릭 이벤트 등 다양한 UI 조정을 할 수 있음

@Composable
fun ModifierExample() {
  Text(
      "Modifier 예제",
      modifier = Modifier
              .offset(x = 10.dp)
              .background(Color.Blue)
  )
}

Surface

UI의 기본적인 컨테이너 역할을 하며, 배경색, 모양, 그림자 등을 정의할 수 있음

@Composable
fun SurFaceExample() {

  Surface(
      modifier = Modifier.padding(5.dp),
      color = MaterialTheme.colorScheme.secondary
  ) {
      Text(
          text = "Hello",
          modifier = Modifier.padding(8.dp)
      )
  }
}

Box

다른 컴포넌트들을 겹쳐서 배치할 수 있는 컨테이너입니다. Z-축(깊이) 순서대로 자식을 배치

@Composable
fun BoxExample() {
  Box {
      Box(
          modifier = Modifier
              .size(70.dp)
              .background(Color.Magenta)
              .align(Alignment.BottomEnd)
      )
  }
}

Row

자식 컴포넌트를 수평으로 배치하는 레이아웃

@Composable
fun RowExample() {
  Row(
      verticalAlignment = Alignment.Top,
      modifier = Modifier.fillMaxWidth().padding(16.dp)
  ) {
      Text(
          text = "Hi",
          textAlign = TextAlign.Center,
          modifier = Modifier
              .weight(3f)
              .background(Color.Magenta)
      )
  }

}

Column

자식 컴포넌트를 수직으로 배치하는 레이아웃

@Composable
fun ColumnExample() {
  Column(
      horizontalAlignment = Alignment.End,
      verticalArrangement = Arrangement.Center,
      modifier = Modifier.size(100.dp),
  ) {
      Text(
          text = "Hi",
          modifier = Modifier.align(Alignment.CenterHorizontally)
      )
  }
}

BoxWithConstraints

자신의 최대 및 최소 제약 조건을 알 수 있게 해주는 Box이며 이를 통해 부모의 크기에 따라 다르게 동작하는 UI를 만들 수 있음

@Composable
fun BoxWithConstraintsExample() {
	BoxWithConstraints {
		val constraints = if (maxWidth < 400.dp) "작은 화면" else "큰 화면"
		Text(constraints)
	}
}

CheckBox

체크 박스 UI 요소로, 사용자가 선택/해제

@Composable
fun CheckboxExample() {
	var checked by remember { mutableStateOf(false) }
	Row(verticalAlignment = Alignment.CenterVertically) {
		Checkbox(checked = checked, onCheckedChange = { checked = it })
		Text("체크박스")
  }
}

TextField

사용자로부터 텍스트 입력을 받는 필드입니다. 다양한 스타일링과 텍스트 처리 옵션을 제공

@Composable
fun TextFieldExample() {
  var name by remember { mutableStateOf("rmsxo") }
  Column(modifier = Modifier.padding(16.dp)) {

      TextField(
          value = name,
          label = {
                  Text("이름")
          },
          onValueChange = { name = it }
      )
      Spacer(modifier = Modifier.size(8.dp))
      Text(text = "헬로우 $name")
  }

}

---

정리

현재 Jetpack Compose는 Android UI 개발의 패러다임을 변화시키고 있다.
선언적 UI 접근 방식을 채택한 Jetpack Compose는 개발 과정을 단순화시키고 코드의 가독성을 향상시키며 새로운 기술을 익히는 데 시간이 소요될 수 있지만 Jetpack Compose의 장점을 활용한다면 더 효율적이고 유연한 안드로이드 앱 개발이 가능하고 앞으로도 Jetpack Compose의 발전과 새로운 기능들에 주목하며 더욱 전진 할려고 한다.