JetPack Compose 구성 요소

Jetpack compose를 세팅하고 구성요소를 살펴봅시다. 

 

Jetpack compose 세팅

Jetpack compose를 세팅하려면 안드로이드 스튜디오에서 Empty Compose Activity 프로젝트를 선택하셔야 됩니다. 

Empty Compose Activity

Next를 누르고 Finish를 누르면 프로젝트가 생성이 됩니다. 

 

JetPack compose 구성요소

코드를 살펴보면 세부분으로 나누어지는 걸 확인할 수 있습니다. 

1. class MainActivity : ComponentActivity(){}

2. fun Greeting(name: String) {} 

3. fun DefaultPreview() {}

 

먼저 제일 윗부분인 class MainActivity : ComponentActivity 부분을 살펴봅시다. 

class MainActivity

 

먼저 클래스 MainActivity가 ComponentActivity를 상속받는 걸 확인할 수 있습니다. 

ComponentActivity는 다음과같이 설정이 돼있습니다. 

 

public class ComponentActivity extends Activity implements LifecycleOwner,
ContextAware, ViewModelStoreOwner, HasDefaultViewModelProviderFactory, 
SavedStateRegistryOwner, OnBackPressedDispatcherOwner, ActivityResultRegistryOwner, 
ActivityResultCaller, OnConfigurationChangedProvider, OnTrimMemoryProvider, 
OnNewIntentProvider, OnMultiWindowModeChangedProvider, 
OnPictureInPictureModeChangedProvider, MenuHost, FullyDrawnReporterOwner

 

여러 가지를 implements 한 Activity를 상속받는 걸 확인할 수 있습니다. 안드로이드 기본 위젯 기능들을 넘겨받는 걸 확인할 수 있네요 

그다음 굉장히 익숙한 onCreate메소드가 보입니다. onCreate란 Activity를 생성할 때 쓰는 메서드입니다. 이 메서드는 필수적으로 있어야 됩니다. 그리고 밑에 setContent가 보입니다. setContent 블록은 구성 가능한 함수가 호출되는 활동의 레이아웃을 정의합니다. 여기서 구성가능한 함수는 어노테이션 @Composable이 들어간 함수를 말합니다. 밑에보시면 

 

@Composable

fun Greeting 함수가 있는데 이 함수가 바로 구성가능한 함수입니다. @Composable이 없으면 구성가능한 함수가 아닙니다. 구성가능한 함수가 아니면 레이아웃을 배치할 수 없습니다. 밑에 사진을 보면 에러가 나는 걸 확인할 수 있습니다. 

Column을 입력하였더니 @Composable invocations can only happen from the contetx of a @Composable function이라고 나오네요 Composable 함수에만 쓸수 있다고 합니다. 

 

그다음 Surface 입니다. 자신이 원하는 위젯이나 레이아웃을 입력하는 곳입니다. 

샘플 코드를 보면 Greeting 함수에 "Android"라는 문자열을 매개변수로 전달하는 걸 볼 수 있습니다. 

 

 

그다음 

@Composable 

fun Greeting() 부분입니다. 

 

 

이 함수는 자신이 원하는데로 바꿀 수 있습니다. 필수가 아닙니다. 

function의 약자인 fun 그리고 Greeting이라는 함수이름 그다음 String 형식의 name이라는 매개변수를 받고 그걸 

Text로 나타내었습니다. Text같은 위젯을 표시하기 위해서는 @Composable이라는 어노테이션을 붙여야 됩니다. 안 그럼 에러 뜹니다. 

 

마지막 부분입니다. 

프리뷰 부분인데 Split를 누르면 나타나는 화면입니다. 

split부분을 누르면 나오는 미리 보기 화면입니다. @Preview를 설정하면 미리 보기 함수가 됩니다. 

Greeting("Android")가 있어 Hello Android가 출력되는걸 확인할 수 있습니다.