unit 2: 상호작용 Dice Roller 앱 만들기

-단순 공부 기록이므로 정확하지 않을수있음-

 

 

3. 레이아웃 인프라만들기

이거 무슨말임? 걍영어로 읽어? ㄱ- 

• Modifier.fillMaxSize() 
  • 해당 레이아웃이 전체 화면을 채우도록함
• Modifier.warpContentSize()
  • 사용 가능한 공간이 최소한 내부에있는 요소들만큼은 크도록함
  • 괄호 안에 정렬 방식을 지정할수있음
  • Modifier.warpContentSize(Alignment.Center)
    • 내부 구성요소들이 세로, 가로 모두 중앙 정렬되게 함
• horizontalAlignment=Alignment.CenterHorizontally
  • 해당 레이아웃이 너비 기준으로 화면 중앙에 배치
• 버튼
  • {} 안에 버튼 클릭시 동작을 작성, 람다식을 전달하는것
  • 함수가 인수로 전달되면 '콜백'이라고도 함
  • 람다는 함수 리터럴이다 이는 함수인데 fun키워드를 사용해 별도로 선언되는 대신 인라인으로 작성되어 표현식으로 전달된다

Button(onClick = { result=(1..6).random() }) {
            Text(stringResource(R.string.roll))//버튼에 쓰여질 글자
        }

• Spacer
  • 빈공간을 만들어주는 컴포저블

Spacer(modifier = Modifier.height(16.dp))//세로로 빈공간 16dp

• 랜덤값 만들기

result = (1..6).random() //1~6의 랜덤한 값을 result에 저장

• remember 컴포저블
  • 컴포저블은 기본적으로 스테이트리스(stateless)다 즉 값을 보유하지 않고(메모리에 저장하지 않는다는 뜻 같음) 시스템에서 언제든지 다시 호출할 수 있어 값이 재설정된다
  • result값이 업데이트 되면 재구성이 트리거되고 결과값이 반영되어 UI가 새로고침된다
  • 내 추측인데 리액트에서 state가 변경되면 해당 컴포넌트 리렌더링 하듯이 컴포저블도 컴포저블 내부의 어떤 변수값이 변하면  에 표시될 어떤 ui요소가 변하면? 새로 컴포저블이 새로고침 되는듯, 새로고침이 되면 메모리에 원래 있던 컴포저블 내부 변수값이 사라지고 재구성되면서 변수값 저장이 되지 않는듯함, 그래서 컴포저블 새로고침 되어도 result값은 유지되어야하니깐 remember를 사용해서 result변수값은 메모리에 남도록 하는듯함
    (그냥 일반 변수만 변하고 ui 변동 없을땐 새로고침 되지 않았음)->찾아보니 컴포즈에서도 state가 있는걸 알게되었음 자세한건 아래에
    • By using mutableStateOf values in a composable function, variables can be made into observables that schedule a recomposition when their value is changed.
    • https://origogi.github.io/android/compose-state/ <-여기 참고
    • 컴포즈에서 state 상태가 변하면 리컴포즈(재구성)된다
    • 컴포저블은 두가지 타입으로 나뉜다 상태를 가지는 stateful composable, 상태가 없는 stateless composable
    • stateful composable은 상태가 변하면 컴포즈 재구성되고 stateless는 스스로 재구성되지 않고 부모인 컴포저블이 재구성 되어야 자신도 재구성된다
    • 컴포저블은 상태에 따라 ui를 구성하고 컴포저블은 함수이므로 지역변수인 상태값은 함수가 새로호출되면 사라진다, 재구성되어도 값이 유지되게 하고싶으면 remember라는 delegate를 쓴다
    • 상태가 변경되었을때 재구성을 하려면 이 상태를 관찰해야됨, 그러기 위해서는 관찰가능한 객체를 써야된다
    • 관찰 가능한 객체를 만드려면 MutableState를 사용한다 그 객체를 만들기 위해서는 MutableState의 mutableStateOf() 라는 api를 써서 만들어야한다. 얘로 만든 변수가 변경되면 컴포저블이 재구성됨(아니 이거 완전 리액트네) 이 컴포저블이 재구성되므로 얘의 자식 컴포저블도 재구성됨
  • 컴포저블 내부의 변수값이 메모리에 계속 저장되도록 하려면 remember컴포저블을 사용해야 함
  • remember컴포저블을 사용하려면 함수를 전달해야 함
    • mutableStateOf(): observable을 반환

    var result by remember{ mutableStateOf(1) }

 

 

 

 

 

 

 

참고사이트

https://developer.android.com/courses/pathways/android-basics-compose-unit-2-pathway-2?hl=ko 

앱에 버튼 추가  |  Android Basics Compose - Add a button to an app  |  Android Developers

https://origogi.github.io/android/compose-state/

[Android][Compose] State 관리