ListBasic 강의 문의 - 딸기 id 오류 및 move 오작... - 인프런

struct ListBasic: View {
    //property
    @State var fruits:[String] = [
        "사과","오렌지","바나나","수박"
    ]
    
    @State var meats:[String] = [
        "소고기","돼지고기","닭고기"
    ]
    
    var body: some View {
        NavigationView {
            List {
                Section {
                    //content
                    ForEach(fruits, id: \.self) { fruit in
                        Text(fruit)
                            .font(.body)
                            .foregroundColor(.white)
                            .padding(.vertical)
                    }
                    .onDelete(perform: delete)
                    .onMove(perform: move)
                    .listRowBackground(Color.blue)
                } header: {
                    Text("과일종류")
                        .font(.headline)
                        .foregroundColor(.brown)
                } // : Section
                
                Section {
                    ForEach(meats, id: \.self) { meat in
                        Text(meat)
                            .font(.body)
                    }
                } header: {
                    Text("고기종류")
                        .font(.headline)
                        .foregroundColor(.red)
                } // : Section
                
            }//: List
            .navigationTitle("우리동네 마트")
            .navigationBarItems(leading: EditButton(), trailing: addButton)
        }// : NavigationView
        
    }
    
    // Fucntion
    func delete(indexSet: IndexSet) {
        fruits.remove(atOffsets: indexSet)
    }
    
    func move(indices:IndexSet , newOffSet: Int) {
        fruits.move(fromOffsets: indices, toOffset: newOffSet)
    }
        
    var addButton: some View {
        Button {
            fruits.append("딸기")
        } label: {
            Text("Add")
        }
    }
    
}

강의 내용에 따라 작성후 프리뷰 플레이에서 확인해 보니

에디트 모드에서 과일을 move 해봤는데 버벅 거리면서

이동하려던 과일이 원래 위치로 돌아갑니다.

증상 분석

프리뷰에서 테스트

프리뷰 플레이에서 move 시 원래 위치로 돌아감

2. 디바이스에서 테스트

move 정상 작동

딸기 추가 시 아래 메시지 노출

ForEach<Array<String>, String, ModifiedContent<Text, _PaddingLayout>>: the ID 딸기 occurs multiple times within the collection, this will give undefined results!
CADisplayTimingsControl too many reasons.
CADisplayTimingsControl too many reasons.
CADisplayTimingsControl too many reasons.

스크린샷 2024-05-15 오후 12.06.26.png

강의 관련된 질문은 언제나 환영입니다 😄

코드 관련 상세하게 작성해주시면 더 좋아요! (상세코드를 붙여넣기 해주세요)
마크다운을 사용해서 편리하게 글을 작성하세요
먼저 유사한 질문이 있었는지 먼저 검색 해보는 습관~
인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요

안녕하세요 랑프 님.

질문주신 List 에서 프리뷰에서 원래 위치도 돌아가고 디바이스에서 정상작동 되었는데 Preview 상의 Error 로써 Preview는 말 그대로 미리 확인용으로 간단하게 코드 변경시, 확인 용도입니다. 실제 기능구현은 Simulator 상에서 주로 이뤄지기 때문에 Simulator 에서 확인 부탁 드립니다.

ForEach<Array<String>, String, ModifiedContent<Text, _PaddingLayout>>: the ID 딸기 occurs multiple times within the collection, this will give undefined results!

위 에래 메세지는 ForEach 반복문시 같은 ID 값이 있을경우 값이 충돌 할 수 있다는 경고 메세지 입니다. 예시로 ForEach 구문에 id:\.self 를 사용해서 자신의 이름이 ID 가 되게끔 했습니다. 딸기 가 지속적으로 추가시 ID 가 딸기가 여러번이라 충돌이 발생합니다.

강의에서는 List 에서 Edit, Add, delete 을 어떻게 적용하는지에 대해서 간단히 설명 하였지만, 실제는 Model 에서 ID 값을 각각 지정해주고 그것을 반복문 사용해서 사용해줘야 합니다.

추후 강의나, 프로젝트에서 ID 를 사용하면 위와 같은 Message 는 나오지 않습니다.

감사합니다

인프런 커뮤니티 질문&답변

ListBasic 강의 문의 - 딸기 id 오류 및 move 오작동