Compose 기초

 

기본적으로 프로젝트를 생성하고 MainActivity.kt를 열어보면 위와 같은 파일 형태가 나온다. 

 

"onCreate() {}"

: 애뮬레이터의 화면 레이아웃을 담당한다. (여기서 아무리 코드를 바꿔도 Preview에서는 반영되지 않는다.)

 

 

"@Composable

func Greeting(...) { }"

: View의 구성을 담당한다.

 

 

"@Preview(...)

@Composable

func GreetingPreview() {...}"

: Preview 화면의 레이아웃을 담당한다. (여기서 아무리 바꿔도 실제 애뮬레이터에서는 반영되지 않는다.)

 

---

 

"onCreate메소드"

 

override fun onCreate(savedInstanceState: Bundle?) { //시뮬레이터 용
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()
    setContent { 
        MyApplication_1Theme {
            Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                Greeting(
                    name = "Androidd",
                    modifier = Modifier.padding(innerPadding)
                )
            }
        }
    }
}

 

override fun onCreate(savedInstanceState: Bundle?) { }

• 안드로이드 앱이 시작될 때 실행될 내용을 정의할 수 있다. 
• savedInstanceState는 앱이 이전에 종료되었을 때 저장해둔 상태를 불러올 수 있도록 해주는 매개변수이다. 앱을 처음 실행하면 null이지만, 앱을 재시작하면 이전 상태를 담고 있다.

 

super.onCreate(savedInstanceState)

• 상위 클래스의 onCreate 메소드를 호출해 기본적인 초기화 과정을 진행하도록 한다.
• savedInstanceState 통해서 이전에 앱 상태가 존재한다면, 이전 상태로 복구할 수 있도록 필요한 정보를 전달해준다.

 

enableEdgeToEdge()

• 레이아웃을 활성화하는 코드이다. 기기의 모서리까지 전체화면을 사용하도록 설정해준다.

 

setContent { }

• setContent는 화면(애뮬레이터)에 표시할 내용을 정의하는 곳이다.
• MyApplication_1Theme이라는 테마 안에 레이아웃을 구성한다.

 

MyApplication_1Theme { }

• 테마를 설정하는 람다 함수로,  앱 전체의 스타일을 지정해준다.
• 테마 설정으로 폰트, 색상 등을 통일되게 적용할 수 있다. 
• 이 테마에서는 Scaffold를 통해 레이아웃을 구성하고 있다.

 

Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding -> ... }

• Scaffold는 안드로이드에서 기본 레이아웃을 구성할 때 자주 사용하는 컨테이너로, 헤더, 본문, 하단바 등을 간편하게 추가할 수 있다.
• modifier = Modifier.fillMaxSize()로 화면 전체를 차지하도록 설정할 수 있다.
• innerPadding은 패딩 값을 조정하기 위한 변수로, 람다식 내부에 있는 함수에 패딩을 적용해준다.

---

 

"@Composable

func Greeting(...) { }"

 

❓ @Composable의 역할?

1. @Composable을 붙이면 해당 함수가 UI의 일부로 사용될 수 있다.
2. 다른 @Coposable 함수를 호출할 수 있다. 
3. 화면이 재구성(화면 회전, 상태 변경 등)될 때, 자동으로 UI를 업데이트 할 수 있다.

 

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

 

해당 코드는 함수 형태로 UI를 선언한 것이다. 

 

만약에 해당 UI의 폰트나 색상을 변경하고 싶다면 modifier에 메소드 체이닝을 이용해서 속성을 추가해주면된다.

Text(
    text = "Hello",
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
        .background(Color.Blue)
        .fontSize(24.sp)
)

 

---

 

 

"@Preview(...)

@Composable

func GreetingPreview() {...}"

 

 

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplication_1Theme {
        Greeting("Android11")
    }
}

 

onCreate()가 애뮬레이터용 레이아웃 구성이었다면, GreetingPreview()는 Preview용 레이아웃 구성이다. 따라서 해당 코드를 수정해도 애뮬레이터의 레이아웃은 변경되지 않는다.

 

 

 

https://developer.android.com/codelabs/jetpack-compose-basics?hl=ko#0