간단한거 만들기 00

사용한거

• Column/Row: 기본적인 세로/가로 레이아웃.
• LazyColumn/LazyRow: 스크롤 가능한 세로/가로 리스트.
• Button: 클릭 가능한 버튼.
• Text: 텍스트 표시.
• Spacer: 빈 공간 추가.
• OutlinedTextField: 텍스트 입력 필드.
• remember: 재구성(리컴포지션) 시 상태 기억.
• rememberSaveable: 재구성, 화면 회전, 앱 종료 후 재시작 시에도 상태 기억.

알아둘 개념

• 컴포지션 (composition) : 화면에 UI를 그리는 과정
• 리컴포지션 (rememberSaveable) : 상태가 변경되어 화면을 다시 그리는 과정 (상태 값이 초기화 됨)

전체 코드

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {//실제 앱 화면 구현 되는곳
            Tutorial_composeTheme {
                Screen()
//                Greeting("Android")
            }
        }
    }
}

@Composable
fun Screen(modifier: Modifier = Modifier) {
    //클릭커 영역
    val (clicks, setClicks) = remember { mutableStateOf(0) }
    Column (
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
            .fillMaxWidth()
            .padding(vertical = 50.dp)
    ) {
        Text(
            "Total Clicks: $clicks",
            fontSize = 32.sp
        )
        Spacer(modifier = modifier.height(10.dp))
        Row (verticalAlignment = Alignment.CenterVertically){
            Button(onClick = { setClicks(clicks + 1) },
                modifier = modifier.padding(horizontal = 10.dp)) {
                Text("Click Me +", fontSize = 24.sp)
            }
            Button(onClick = { setClicks(clicks - 1) },
                modifier = modifier.padding(horizontal = 10.dp)) {
                Text("Click Me -", fontSize = 24.sp)
            }
        }
        Spacer(modifier = modifier.height(40.dp))
        //환전 영역
        val (usd, setUsd) = remember { mutableStateOf("") }
        OutlinedTextField(
            value = usd,
            onValueChange = {setUsd(it)},
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            placeholder = { Text("US Dollar")}
        )
        Spacer(modifier = modifier.height(10.dp))

        if (usd.isNotEmpty()) Text("$usd USD is \n ${usd.toInt() * 1230} KRW", fontSize = 24.sp)

    }
}

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

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Tutorial_composeTheme {
        Screen()
//        Greeting("Android")
    }
}

따로 때서 보기

fun Screen(modifier: Modifier = Modifier) {
	//변수 생략
    Column (
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
            .fillMaxWidth()
            .padding(vertical = 50.dp)
    ) {
    //내부 생략
    }
}
@Composable fun Screen(modifier: Modifier = Modifier):
@Composable: 이 함수가 Jetpack Compose의 UI 시스템의 일부임을 나타내는 "어노테이션"
fun Screen(...): Screen이라는 이름의 함수 선언
modifier: Modifier = Modifier: 이 매개변수를 통해 Screen Composable의 레이아웃과 모양을 사용자 정의 가능
(기본적으로는 빈 Modifier가 사용됩니다.)

Column: 전체 UI는 Column 내부에 구성됩니다. Column은 자식 Composable들을 세로로 정렬
horizontalAlignment = Alignment.CenterHorizontally: Column 내의 콘텐츠를 가로 가운데 정렬
modifier:
.fillMaxWidth(): Column이 부모의 전체 가로 폭을 차지하도록 함
.padding(vertical = 50.dp): Column의 위쪽과 아래쪽에 50dp의 패딩을 추가

//클릭커 영역
    val (clicks, setClicks) = remember { mutableStateOf(0) }
    //clicks : 클릭한 횟수를 담을 변수
    //setClicks : 클릭할때 동작 시킬 함수
    Column (
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
            .fillMaxWidth()
            .padding(vertical = 50.dp)
    ) {
        Text(
            "Total Clicks: $clicks",
            fontSize = 32.sp
        )
        Spacer(modifier = modifier.height(10.dp)) //Just...공간 띄우기
        Row (verticalAlignment = Alignment.CenterVertically){
            Button(onClick = { setClicks(clicks + 1) },// 버튼 누를때 마다 +1
                modifier = modifier.padding(horizontal = 10.dp)) {
                Text("Click Me +", fontSize = 24.sp)
            }
            Button(onClick = { setClicks(clicks - 1) },// 버튼 누를때 마다 -1
                modifier = modifier.padding(horizontal = 10.dp)) {
                Text("Click Me -", fontSize = 24.sp)
            }
        }

//환전 영역
        val (usd, setUsd) = remember { mutableStateOf("") }
        //usd : 미국 달러를 받을 변수
        //setUsd : 미국달러 변환시 사용될 함수
        OutlinedTextField(
            value = usd,//입력한 값이 저장될 곳 = usd
            onValueChange = {setUsd(it)}, //값이 바뀔때 호출할 함수
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
			//키보드 타입
            placeholder = { Text("US Dollar")}//미 입력시 나올 가이드 텍스트
        )
        Spacer(modifier = modifier.height(10.dp))//공간 띄움

        if (usd.isNotEmpty()) Text("$usd USD is \n ${usd.toInt() * 1230} KRW", fontSize = 24.sp)
		//입력된 값이 없으면 사라지고 있으면 usd 값과 usd * 1230한 값을 띄움