1. 개요

2. 주요 특징

• 선언적으로 UI를 구성한다.
• @Composable 함수를 사용하여 UI를 구현하는 함수를 지정한다.
• 리액티브 프로그래밍 패턴을 따른다.

3. 원리

• Jetpack Compose의 내부 구현을 설명하는 영상

4. 구현 예시

#!syntax kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun LoginForm() {
    // 상태 변수 정의
    val (username, setUsername) = remember { mutableStateOf("") }
    val (password, setPassword) = remember { mutableStateOf("") }
    val context = LocalContext.current

    Column(modifier = Modifier.padding(16.dp)) {
        // 사용자 이름 입력 필드
        OutlinedTextField(
            value = username,
            onValueChange = setUsername,
            label = { Text("아이디") },
            modifier = Modifier.fillMaxWidth()
        )

        // 비밀번호 입력 필드
        OutlinedTextField(
            value = password,
            onValueChange = setPassword,
            label = { Text("비밀번호") },
            modifier = Modifier.fillMaxWidth()
        )

        // 로그인 버튼
        Button(
            onClick = {
                // 로그인 버튼 클릭 시 로직 처리
                // 예시로 Toast 메시지를 띄우는 것으로 함
                android.widget.Toast.makeText(context, "로그인 시도: $username", android.widget.Toast.LENGTH_SHORT).show()
            },
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 16.dp),
            contentPadding = PaddingValues(12.dp)
        ) {
            Text("로그인", fontSize = 18.sp)
        }
    }
}

5. Compose와 기존 UI 툴킷과의 비교

• XML 파일을 별도로 작성할 필요가 없다.
• 코드 자체가 UI 선언이기 때문에, ViewBinding이나 DataBinding등을 이용하여 코드와 화면을 연결하는 작업이 필요하지 않다.

6. 외부 링크

• 공식 문서