[Android].ch1-1.Composable 함수

[Android] Ch1-1. Composable 함수

1. Composable 함수

1) 기본 형식

@Composable  // Composable 함수 어노테이션
fun ComponentName() {
    // UI 구성 코드
}

• @Composable 어노테이션이 부착된 함수입니다.
• Jetpack Compose 환경에서 UI를 구성하는 기본 단위로 작동합니다.
• 다른 Composable 함수 내부에서만 호출이 가능합니다.

2) 주요 구성 요소

• @Composable 어노테이션: 해당 함수를 Composable로 지정합니다.
  • 컴파일러 측에 данного 함수가 UI 트리를 생성한다는 사실을 명시합니다.
  • 호출 제약: 일반 함수에서는 호출할 수 없으며, 오직 다른 Composable 함수 내에서만 호출 가능합니다.
• 함수 명명 규칙: PascalCase(첫 글자 대문자) 사용이 권장됩니다.
  • 권장: MyButton(), UserProfile(), MainScreen()
• 매개변수 (Parameters): UI 구성에 필요한 데이터를 외부로부터 전달받습니다.
  • 예시: fun Greeting(name: String)
• 반환값 (Return Type): Unit입니다.
  • 내부적으로 UI 계층을 렌더링하는 것이 목적이므로 특정 값을 반환하지 않습니다.

3) 주요 특징

• 선언적 UI (Declarative UI): 과정(어떻게 그릴지)을 명령하는 것이 아니라 결과 상태(무엇을 그릴지)를 선언합니다.
• 재사용성: 독립적으로 작성된 Composable 함수는 프로젝트 내 어느 위치에서든 반복 호출하여 재사용할 수 있습니다.
• 중첩 허용: 하나의 Composable 함수 내부에 다른 다수의 Composable 함수를 중첩하여 복합적인 UI 요소 구성이 가능합니다.
• 미리보기 (Preview): 상단에 @Preview 어노테이션을 추가하면 에뮬레이터를 구동하지 않고도 Android Studio의 디자인 탭에서 UI 렌더링 결과를 즉시 확인할 수 있습니다.

2. 사용 예시

// 기본 Composable 함수: 텍스트 렌더링
@Composable
fun Greeting(name: String) {  // 매개변수를 통한 데이터 수신
    Text(text = "$name!")
}

// 재사용 및 중첩 호출
@Composable
fun MainScreen() {
    Greeting(name = "사용자")  // 기 선언된 Greeting 함수 호출
}

// Android Studio 미리보기 설정
@Preview(showBackground = true)  // 배경색 렌더링 포함
@Composable
fun GreetingPreview() {
    Greeting(name = "Preview")  // 개발 중 확인을 위한 샘플 데이터 주입
}