다시 오신 것을 환영합니다
조금 전에 몇 줄의 코드로 압축적으로 배운
아름다운 개념을 사용할 것입니다
그래서 별도의 영상이 필요할 것이라고 생각했는데
이 영상 촬영을 이미 시작했을 때 이 개념을
설명 없이 모두 한 영상에 넣는 것이 말이 안된다고 생각했습니다
이제 ShoppingList 파일에 있고 그 안에 @composable(컴포저블)에 있습니다
그리고 여기 LazyColumn 안에 ShoppingListItem이 있습니다
맞지요?
이 LazyColumn은 기본적으로 Column(컬럼)이 무한정으로 있는 것을 의미하여
다시 말하자면 항목이 서로 위에 계속 쌓이는 것입니다
우리 같은 경우에는 화면에 무언가를 표시하기 위해 ShoppingListItem을 방금 정의했습니다
그렇지요?
또한 Edit 버튼과 Delete 버튼을 누르면 발생할 일에 대한
세부 사항을 넣지 않았습니다
지금 이 부분은 바꿀 것이고 여기
안에 있습니다
이제 이것을 없애겠습니다
이제 특정 지점을 생각해야 합니다
따라서 현재 편집 중인지 아닌지 확인해야 합니다
따라서 목록의 항목 상태를 살펴보면 편집 안됐거나, 편집 중이라는 것입니다
즉, isEditing 또는 isNotEditing이라는
boolean(불리언)이 있으며 목록 항목에 사용할 수 있는 것입니다
따라서 isEditing이 참이라면
이 사용자 인터페이스가 보여야 합니다
여기서 이 사용자 인터페이스는 무엇일까요?
쇼핑 항목 '편집기'입니다
다른 경우에는 이것이 보여야 합니다
즉, 쇼핑 목록 항목입니다
따라서 if 함수를 사용하여 설정합니다 사실 it를 사용하는데
여기 it가 있습니다
여기서 it는 ShoppingItem을 의미합니다
회색으로 표시되었으나 ShoppingItem이라고 나와있습니다
따라서 it를 키워드로 사용할 수 있습니다
그러나 이름을 부여할 수도 있습니다
그러나 여기서 대시(-)와 이상 (〉) 기호를 사용해야 합니다
이제 it 대신에 item을 사용할 수 있어서
조금 더 서술적인 이름이 됩니다
따라서 여기에 입력할 내용은 if(item.isEditing)입니다
따라서 우리가 보는 목록에 있는 항목이
10개, 20개 또는 100개 있을 경우 현재 LazyItemScope에
있는 항목만 화면에 보이는 것입니다
즉 현재 사용 가능하고 화면에 보이는 항목을 의미합니다
목록에 항목이 100개 있어도 LazyItemScope 안에 있는 내용만 화면에 보입니다
아마 10개에서 20개 항목이 될 것인데 화면 크기에 맞춰 항목이 보일 것입니다 그리고 바로바로
하나 위 그리고 하나 아래를 계산하여 스크롤 할 때 보이지만
그렇지 않은 경우 LazyItemScope에서 빠져나옵니다
지금 보는 항목이 편집 상태에 있다면
ShoppingItemEditor 컴포저블이 필요합니다
우리가 직접 설정한 컴포저블입니다
몇 번 지난 영상 중 하나에서 했습니다
좋습니다
그리고 여기 다른 컴포저블이 있습니다 ShoppingItemtList 컴포저블입니다
이 역시 지난 영상에서 설정했는데 표시하려는 대체 화면입니다
기타 상황은 다시 말해 편집을 안하는 동안이며 이때
ShoppingListItem을 보여줍니다
이 컴포저블입니다
여기서 보실 수 있습니다
Zobel입니다
아마 이 컴포저블이 보이지 않으실 것입니다
이것이 컴포저블입니다
여기서 문제는 항목과 onEditClick 이벤트를 전달하는 것입니다
그리고 여기에는 항목과 onEditComplete를 전달해야 합니다
항목은 쉽습니다
항목을 전달하기 위해 item을 선택합니다
그러나 ShoppingListItem을 약간 다릅니다
이 부분은 나중에 해결하겠습니다
일단 코멘트 아웃합니다
지금은 여기 onEditComplete에 집중하겠습니다
편집이 끝난 후 무엇이 발생해야 할까요?
여기 onEditComplete에 string(스트링)과 Int가 보입니다
따라서 이것을 선택해야 합니다
이를 위해 editName을 사용해야 합니다
editedName이 난 것 같습니다
그리고 이와 같이 쉼표(,) editedQuantity를 입력합니다
여기 다시 Lambda(람다)를 사용합니다 sItems.sItems.map입니다
이제 mapping(매핑)이 시작됩니다
이 부분은 이와 같이 입력해야 합니다
따라서 새로운 항목이 매핑된 예전 sItems가 되어 항목을 수정하고 이를 복사하여
isEditing을 거짓으로 설정합니다
따라서
편집 중인 항목이 있다면 이 항목에
더 이상 편집하지 말라고 나와야 합니다
그렇다면 isEditing을 거짓으로 설정해야 할까요?
이것이 여기 onEditComplete을 클릭하면 발생해야 하는 것입니다 다시 말해 버튼에
편집이 완료되었다고 표시되는 것입니다
따라서 편집이 완료됐기 때문에 거짓으로 설정하는 것입니다
이것이 이 줄이 하는 기능입니다
그 다음 editedItem을 설정해야 하는데 sItems 그리고 점(.)을 입력합니다
그리고 여기에 find 함수를 사용하여 각 항목 중에 it.id와 item.id가 동일한 것을 찾습니다
여기 보이는 내용입니다
더불어
이 find 함수는 목록에 특정 항목을 찾게 해줍니다
우리가 살펴보는 목록은 항목 목록입니다
즉 sItems 목록으로
ShoppingListItem 목록입니다
이 find 함수로 편집 중인 항목을 찾습니다
여기 그리고 여기에 항목이 있습니다
여기 item.id는 편집 중인 항목의 ID를 의미하며
비교하는 항목 ID와 동일해야 합니다
이 시점에서 동일한 ID가 있는 항목을 찾는다면 찾은 항목을 inEditedItem에
저장해서 1015개 항목이 있는 목록에서 어떤 항목을 원하는지 표기하여
현재 보이는 항목과 편집 중인 항목이 일치하는지 확인합니다
이제 editedItem이 생겼으니 안전하게 풀 수 있습니다
항목을 어떻게 안전하게 풀 수 있을까요?
지난 영상에서 살펴본 let 함수를 사용하는 것입니다
let 함수는 ShoppingItem을 불러올 수 있게 하는데 이것이 편집된 항목입니다
편집된 항목이 비어 있을 수도 있습니다
그런 항목이 없을 수도 있습니다
그런 경우 it.name을 editedName으로 설정하고 it.quantity는
editedQuantity로 설정합니다
즉 편집한 항목의 이름이 지금 텍스트 입력 창에 입력한 이름으로 바뀌고
텍스트 입력 창에 입력한 수량으로 바뀌어야 한다는 것입니다
여기에 이것이 발생하는 것입니다
매우 복잡합니다
여기에 무슨 일이 일어나고 있나요?
목록 안의 항목을 수정할 때마다 사용해야 하는 코드인데
항목이 무엇인지 모를 경우 사용할 수 있습니다
그렇기 때문에 항목을 먼저 찾고 그 다음에
특정 항목을 편집하는 방법을 사용해야 합니다 그런 다음 editedItem인 ShoppingItem을 가져와 값을 배정하는데
이는 조금 전에 획득한 editedName입니다 이것을 Edit 버튼을 누르면
전달하는 것입니다
여기 ShoppingItem을 보면 스트링과 Int가 있습니다
이 두 개를 사용하는 것입니다
지금까지 ShoppingItemEditor에 대한 내용이었습니다
다음으로 ShoppingListItem입니다
약간 덜 복잡합니다
여기에는 item을 바로 전달할 수 있습니다
그런 다음 Edit 버튼을 누른 후 모슨 일이 발생해야 할까요?
그리고 아직 도입하지 않은 다른 버튼이 있습니다
Edit 버튼을 누르면 sItems는 sItems.map이어야 한다고 설정합니다
그 다음 복사합니다
copy를 입력하고 isEditing이
it.id == item.id와 동일하다고 합니다
여기 item.id를 보면 유형이 정수입니다
여기에 등호(=)가 두 번 있기 때문에 비교하는 것입니다
즉 항목을 매핑 안에 전달된 쇼핑 목록 요소와 비교하는 것입니다
그런 후 이 id를 서로 비교합니다
이것이 참일 경우 isEditing도 참이며
나머지 경우 isEditing이 거짓입니다
쉽게 말하자면 Edit 버튼을 클릭할 때 더 높은 단계에서 발생하는 것을
단순하게 설명하는 것입니다
여기 Edit 버튼을 클릭합니다
어떤 Edit 버튼을 클릭했는지 어떻게 알 수 있을까요?
여기 House 항목에 있는 버튼을 클릭했는지
123 항목의 Edit 버튼을 클릭했는지 어떻게 알까요?
알 수 없습니다
한번 클릭하면 이를 알 방법을 찾아야 합니다
어떤 것을 클릭했는지 알기 위한 방법은 여기에 있습니다
이 항목을 클릭하면 이 줄에 있는 방법을 사용하여 알아낼 수 있습니다
즉 어떤 항목을 편집하는지 알아내는 것입니다
그 다음
그리고 바꾼다는 것도 넣어야 합니다
그리고 편집과 바꾸는 것은 isEditing 불리언이 참이라는 것을 의미합니다
그 다음 Undeleted 함수에서는 무슨 일이 일어나야 할까요?
이것이 onEditClick입니다
그 다음 두 번째인 onDeleteClick이 있습니다
한번 보겠습니다
이것도 아닙니다
여기 onDeleteClick이 있습니다
그렇다면 여기에 무엇이 발생해야 할까요?
여기에서 sItems에서 현재 항목을 삭제하라는 것입니다
따라서 sItems가 예전 sItems 빼기 해당 항목이 됩니다
그것이 전부입니다
이제 ShoppingListItem에서 실행할 내용이 없습니다
이제 이 중괄호({})를 삭제할 수 있습니다
이것 또한 별도의 줄에 넣겠습니다
여기에 Edit을 클릭하면 발생하는 내용이 있어서
편집 중인 항목을 찾을 수 있습니다
그 다음 해당 항목의 isEditing의 값을 참으로 설정하여 ShoppingItemEditor로
화면에 표시되도록 합니다 이 항목이 편집 중이기 때문입니다
그 외의 경우 Delete를 클릭하면
해당 항목을 없애게 됩니다
이제 제대로 작동하는지 확인하기 위해 어플리케이션을 실행하겠습니다
여기 UI가 보입니다
Add Item을 클릭합니다
여기에 Mouse를 추가하고 1개로 설정합니다
또 항목을 추가합니다
자동차를 사고 싶다고 하겠습니다
항목을 또 추가하겠습니다
아내를 위해 꽃을 사려고 한다고 하겠습니다
두 다발 산다고 하겠습니다
추가하면 어떤 일이 발생하는지 보겠습니다
저장해 보겠습다
저장 기능이 제대로 작동하는 것을 확인했습니다
이제 다음으로
자동차를 삭제하겠습니다
보시다시피 자동차 항목이 사라졌습니다
마우스를 샀다고 가정하겠습니다
마우스를 삭제하겠습니다
마우스 역시 사라졌습니다
애플리케이션이 제대로 작동 중입니다
이것이 전부입니다
해야 할 기능을 달성했습니다
이 영상에서 하고 싶은 것이 하나 남았는데 이 두 버튼입니다
로우 가장 끝에 있는 버튼입니다
이 역시 달성하려고 합니다
ShoppingListItem 안에 있습니다
여기에 또 다른 파라미터를 추가합니다
여기에 둥근 모서리가 있습니다
여기 border(테두리)가 있고 쉼표(,)
그리고
horizontalArrangement를 사용하여 Arrangement.SpaceBetween으로 설정합니다
좋습니다
이제 애플리케이션을 다시 실행하겠습니다
이제 화면 가장 끝에 위치할 것입니다
이 애플리케이션은 여기까지입니다
축하드립니다
여기까지 온 것이 믿기지 않습니다
또 집과 1을 입력하고 Add를 클릭합니다
이렇게 보입니다
이제 의도한 것과 같이 오른쪽 끝에 있습니다
이번 영상은 여기까지이며 즐거우셨기를 바랍니다
이제 다음 영상으로 넘어가서 오늘의 강의를 요약하겠습니다