Composable & Preview

compose

• jetpack compose란?
  • native Android UI를 만들기 위한 toolkit
  • 선언적으로 구성되어, XML layout이나 Layout Editor 없이 간단하게 UI component를 만들 수 있음
  • composable 함수로 정의하면, compose 컴파일러가 그 작업이 동작하도록 만들어줌

Composable function

• compose를 구성하는 함수들
• 앱이 보이는 방식이나 데이터 사이의 dependency 등에 집중
• @composable annotation만 붙이면 사용 가능
  • ex1)
    Text composable function - Compose UI library에 정의
    

    import android.os.Bundle
    import androidx.activity.ComponentActivity
    import androidx.activity.compose.setContent
    import androidx.compose.material3.Text
    
    class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                Text("Hello world!")
            }
        }
    }

    
    
     
    setContent 블럭이 composable function의 layout을 결정해줌
  • ex2)
    직접 정의한 composable function
    

    import androidx.compose.runtime.Composable
    
    class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                MessageCard("Android")
            }
        }
    }
    
    @Composable
    fun MessageCard(name: String) {
        Text(text = "Hello $name!")
    }

    
    
     
    MessageCard라는 composable function을 만들어 사용하는 예제. Composable annotation을 사용하여 만듦.
    composable function이므로 Text composable을 호출해 사용 가능

---

 

Preview annotation

• 위에서 작성한 코드는 전부, run을 해야만 실제 동작을 볼 수 있다.
• 바로바로 composable function이 반영되었는지 보기 위해서는 Preview annotation을 사용한다.
• Preview annotation을 사용한 경우의 코드 : 

@Preview
@Composable
fun PreviewMessageCard(){
    MessageCard("Android")
}

 

이 코드만 덧붙여주면 된다.

• 이 annotation을 붙이면, PreviewMessageCard()라는 function은 어디서도 호출되지 않지만
  Android Studio에서 빌드 없이도 app의 실행 모습을 보여준다.