돌아오신 것을 환영합니다
이번 recipeScreen에 대해서 다룰 것입니다
이제 우리는 데이터를 로딩하는 법을 알고
스마트폰에 데이터를 보관하는 법을 어느정도 알고 있습니다
실질적으로 저장하진 않지만 말입니다
RAM에만 있는 것입니다
좋습니다 만약 fetching이 성공했다면 이제는 실제로 유저 인터페이스를
준비해봅시다
좋습니다
조금 나중에 유저 인터페이스에 표시하는 방법 또한 배우게 될 것입니다
하지만 지금은 우리가 표시하고자 하는 사용자 인터페이스인 composable을 포함하게 될 파일을
하나 만들어 줍니다
자 저는 이제 recipeScreen을 새 Kotlin 파일로서 추가할 것입니다
그리고 이 recipeScreen 안에서 모든 사용자 인터페이스 요소들을 다루게 될 것입니다
우리의 모든 composables를 말입니다
그래서 가장 큰 규모는 화면 전체가 되겠습니다
혹은 주 화면 전체에 표시하고 싶은 것을 말입니다
그리고 개별 컴포넌트는 이 recipeScreen 안에 있게 될 것입니다
그래서 이 것을 RecipeScreen이라고 작성합니다
그리고 이 안에 modifier를 넣을 것입니다
전달하는 modifier가 뭐던지 간에,
compose modifier를 선택하도록 합니다
전달하는 modifier가 뭐던지 간에, 사용하고자 한다고 작성합니다
기본 설정으로 modifier는 여기서 사용되어야 한다고 작성합니다
이제 recipeScreen은 컨텐츠가 필요하기 때문에 이 modifier를 호출하겠습니다
틀린 것을 고치겠습니다
자 그럼 이제 recipe screen 양 옆에 어떤 것을 놓고 싶은가 하면
일단 viewModel을 사용합니다 왜냐하면 viewModel이 올바른 데이터를 가져오도록 해주기 때문입니다
그러니 recipeViewModel 객체를 설정합시다, 이는 main viewModel의 유형이 될 것입니다
mainViewModel을 작성해 줍니다
지금으로썬 일반적인 viewModel이 되도록 정의할 것입니다
그래서 여기에는 viewModel을 import할 필요가 있습니다
그러면 compose viewModel이 추가되었음을 확인할 수 있습니다
그리고 저는 viewState 또한 필요합니다
그러니 viewState by에 recipeViewModel.categoriesState를 작성합니다
그 다음 이 안에 import해야할 것이 있습니다
getValue를 import합니다 이는 state의 값을 바로 가져올 수 있도록
말입니다
이제 우리가 어떤 recipeCategories를 로딩했는지 알 수 있도록 recipeState를
얻게 해주는 categoryState를 가집니다
그래서 우리의 recipeScreen 내에서 설정하고 싶은 UI는 박스입니다
좋습니다
저는 이 박스를 import해서 박스 함수를 만들어냈습니다
이는 foundation layout에 있습니다
그리고 이제 이것에 modifier를 전달해서 최대 사이즈를 채울 것입니다
그래서 modifier.fillmaxsize를 추가해 줍니다
이게 끝입니다
자 그래서 박스 안은 어때야 할까요
때에 따라 다릅니다
자 이제 로딩 중에 circularProgressIndicator를 로딩 아이콘으로 로딩 스크린에
표시하고 싶습니다
로딩 중이 아니라면 카테고리를 표시하고 싶습니다
자 그럼 이제 첫번째 항목부터 처리해 봅시다
when클래스를 이용해서 viewState가 로딩 중일 경우에는
loading을 작성해줍니다
circularProgressIndicator를 말입니다
보시면 circularProgressIndicator라고 불리느 것이 있습니다
가운데 정렬을 해줍니다
해당 modifier는 .align towards the center입니다
이 안에 alignment center를 전달해 줍니다
그래서 무슨 일이 일어나는 걸까요?
자, 기본적으로 우리는 circularProgressIndicator인 이 composable을 사용합니다
그리고 우리는
modifier.align(alignment.Center)를 사용합니다
우리는 이 방식을 본적이 있으며 그렇지 않았다면 modifier = modifier...라고
했을 것입니다
여기와 여기에 그런것처럼 말입니다
이는 또 다른 방법입니다
이것이 바로 circularProgressIndicator를 직접 전달 하는 방법입니다
정렬이 중심을 향해야 한다고 하는 짧고 작은 코드로
직접 전달 할 수 있었습니다
이는 그냥 작성하는 다른 방식입니다
그래서 당신은 다른 접근 법이 있다는 것을 알면 되는 것입니다
그리고 이는 코딩을 할 때 자주 있는 현상입니다
그런 다음 viewState.error이 null과 일치하지 않는다는 state나
다른 상황이 있을 수 있습니다
그러면 정말 에러가 뜨면 어떤 일이 일어나야 하겠습니까?
이는 우리가
여기에서 처리할 수 있는 것입니다
text라는 추가적인 텍스트 필드를 표시할 수 있습니다
그리고 이를 위해 텍스트를 import 해줍니다
그리고 error occurred라는 composable text를 도입합니다
보이는 것처럼 하면 됩니다
그리고 마지막으로 또 다른 경우가 있습니다
그래서 무언가를 로드했다는 뜻의 else를 써줍니다
따라서 로드하는 중 오류가 발생하거나 다른 오류가 없어 로드되지 않습니다
그리고 카테고리가 있습니다
그래서 저는 displayCategories 입력합니다
자 그래서 이것이 recipe screen의 첫번째 파트입니다
다음 영상에서는 카테고리 스크린이 어떻게 생겨야하는 것인가를 설정하겠습니다
왜냐하면 잠재적으로 우리는 여러 스크린을 원하기 때문입니다
우리는 카테고리 화면을 원하고 특정 recipe로 이동하고 싶습니다
자 이제 이번 영상은 여기까지가 되겠습니다
다음 영상에서 뵙겠습니다