이 사용자 인터페이스를 만드는 연습을 하셨길 바랍니다
그리고 이는 MVVM 혹은 뷰 모델 방식을 이용해 바꾸기 위해 필요합니다
지금까지 했던 것과 같이 우선 옛날 방식으로 만들 것인데
어떻게 아키텍처를 이용해 작업하는지 알아볼 것이기 때문입니다
이 강의에서는 어떻게 애플리케이션이 만들어지는 지 빠르게 제 코드를
보여드리겠습니다
그러기 위해서 새 프로젝트를 만드는데 빈 액티비티를 선택하고 다음을 누릅니다
CounterMVVM이라고 이름 지을 것인데
나중에 코드를 바꿀 것이기 때문입니다 이제 시작해 보겠습니다
로딩이 완료되면 코드를 수정할 수 있습니다
좋습니다
앱이 준비되면 Greeting과 GreetingPreview 컴포저블을 지우도록
하겠습니다
이 것들은 사용하지 않을 것입니다
@Composable_를 입력해 새 컴포저블을 만드는데
이 것은 fun
TheCounterApp()이고
counter 변수가 필요하므로
val count = remember{ mutableStateOf() }가 되고
이는 숫자 0입니다
이 변수를 사용하기 위해 remember를 import합니다
이제 증가하는 함수와 감소하는 함수가 필요합니다
그러므로 증가하는 함수를 만드는데
아주 간단합니다
count의 값만 필요하므로 count.value에 이를 증가 시킵니다
이제 감소하는 함수입니다
값을 1 감소 시키므로
count.value--가 됩니다
이 것이 1씩 감소 시켜줍니다
이제 사용자 인터페이스가 필요하므로
설정해 보겠습니다
카운터 앱에 컬럼을 설정하는데 fillMaxSize라고 부를 제어자를
가질 것인데
이를 통해 전체 화면 너비를 가질 것이고
항목은 중앙에 위치하게 할 것인데
먼저 Column 함수부터 import 하겠습니다
이제 verticalArrangement를 설정하는데
Arrangement.Center로 하겠습니다
horizontalAlignment를 설정해서 항목이 수평적으로 중앙에 위치하게 합니다
이제 컬럼에 콘텐츠가 필요합니다
이렇게
말입니다
그리고 콘텐츠는 그냥 텍스트였는데 text 속성은 Count이고
달러 기호를 이용해 count.value를 얻는데 이 것이 텍스트이고
폰트 사이즈를 조금 키우겠습니다
이런 속성이 있는 데 Text안의 이 콤마 뒤에 fontSize = 24.sp를 입력하는데
다른 어떤 값을 입력하셔도 됩니다
sp를 import하겠습니다
그리고 fontWeight는 FontWeight.Bold로
텍스트를 굵게 설정합니다
글씨를 굵게 하려면 fontWeight를 사용해서
더 굵어지게 해서 굵은 글씨를 만들 수 있습니다
그리고 Spacer를 추가하는데 16 픽셀 밀도를 가지는 Modifier.height인
제어자를 가집니다
dp를 import하고
Spacer를 import합니다
이렇게
이제 Row를 만들 것인데
올바른 Row를 import해야 하는데
됐습니다
이 것이 올바른 것입니다
이제 여기에 필요한 것으로
onClick 이벤트를 갖는 버튼을 하나 만드는데
동작을 위해 Button을 import합니다
이 Button을
import합니다
이 것이고 이제 onClick를 쓸 수 있는데
이 onClick 이벤트는 그저 increment 함수만 호출할 것이므로
increment를 실행하고 이 버튼은 콘텐츠도 필요한데 표시될 글씨인 text 유형
입니다
버튼에 Increment라고 표시하고
이 Row안에 버튼이 하나 더 필요한데 오른쪽 버튼입니다
이 버튼은 decrement를 호출하고 Decrement라고 표시됩니다
이것이 거의 전부입니다
이제 Surface 안에서 컴포저블을 호출하면 됩니다
이제 앱을 실행합니다
좋습니다
다 됐습니다
애플리케이션이 만들어졌습니다
이제 숫자를 증가 시켜보면
Count가 올라가는 것이 보이며
잘 동작합니다
다 좋습니다
그러나 한 가지 보여드리고 싶은데 스마트폰을 옆으로 회전 시키면
보시는 것처럼 사용자 인터페이스가 다시 로딩 되고 Count는 초기화됩니다
사용자가 앱을 사용하다가 회전을 하면 애플리케이션의 상태도 변한다고 상상해 보십시오
그러면 보던 숫자도 갑자기 사라집니다
아주 나쁜 사용자 경험일 것입니다
이는 우리가 피해야 할 것입니다
물론 애플리케이션을 한 방향으로 강제할 수도 있지만 이는 우리가 목표로
하는 것이 아닙니다
우리는 상태를 유지하는 애플리케이션을 만드는 법을 배우려 합니다
물론 해결 방법들이 있습니다
remember를 사용하는 대신에 rememberSaveable이라는 것을 사용할 수 있지만
그러려면 stateSaver를 포함한 여러 가지가 필요합니다
이를 이용한다면 빠른 해결 방안이 되지만
장기적으로 제대로 된 애플리케이션을 만드시려면 데이터를 저장하고
상태를 저장하는 더 나은 법을 이해하셔야 합니다
이 부분이 뷰 모델 클래스의 많은 도움을 받을 수 있는 부분이며
다음 강의에서 살펴볼 부분입니다
다음 강의에서 뵙겠습니다