removeItem 에서 element 가 하나 남았을 때 삭제가 되지 않는 문제

Question

안녕하세요!! 먼저 좋은 강의 올려주셔서 감사하다는 말씀 드리고 싶습니다!!!!! 공부하는 데 정말 많은 도움을 받고 있습니다 ㅎㅎ 강의 보면서 프로젝트 진행하던 중, TODO Item 항목을 삭제하는 부분에서 문제가 생겨 질문드립니다..!! 다른 경우는 삭제가 잘 되는데, 배열 안의 원소가 하나 남았을 때는 삭제가 되지 않았습니다 ㅠㅠ return state.todoList.splice(id, 1); 그래서 이 부분을 아래와 같이 index 를 찾아서 splice 하도록 수정해 봤습니다. return state.todoList.splice(state.todoList.findIndex(item => item.id === id), 1); 그랬더니 잘 동작하긴 하는데.. 혹시 제가 소스를 잘못 작성한건지.. 이렇게 고쳐서 진행해도 되는지.. 여쭤보려고 질문 드립니다 ㅠㅠㅠ 감사합니다!!

성도희 · Answer

안녕하세요! 일단 보내주신 코드는 올바른 접근 방법입니다. 보통 데이터에서 id는 해당 아이템의 고유한 값으로 설정되므로, findIndex를 사용하신것은 아주 휼륭한 판단이십니다.👍👍 (제가 예제로 코딩한 부분은 편의를 위해 일반적인 id와는 다르게 array상에서 아이템의 인덱스의 용도로 사용하였습니다.)   하지만 그 전에 왜 삭제가 되지 않는 버그가 있는 것 인지 확인해 보니,  ItemInput 컴포넌트에서 addItem 할 때, id 값을 설정하는 부분에서 문제가 있는것으로 보입니다. ㅠㅠ addItem () { this . $store . commit ( 'addItem' , { id : this . todoList . length + 1 , title : this . title , status : 'active' , }) ; } 코드와 같이 todolist 아이템 개수 + 1 = id 입니다. 그리고 이 id값은 스토어에서 removeItem, ChangeStatus에서 todolist  Array의 특정 item을 찾는 인덱스 값이 됩니다. 여기서 포인트는 ⭐Array의 인덱스는 0부터 시작⭐한다는 것입니다!! 따라서 영상 말미에 새로 추가한 아이템의 id는 기존 아이템 개수인 2개에 1을 더해 3이 되고, todolist Array의 세번째에 추가되고 인덱스는 2가 됩니다. ex. [첫번째 아이템: 인덱스0, 두번째 아이템: 인덱스1, 새로 추가한 세번째 아이템 인덱스2 ] id와 인덱스가 동일하지 않기때문에 이 추가된 아이템은 삭제가 되지 않습니다. 이에 따라 혼동을 드린 점 정말 죄송합니다 ㅠㅠ 빠른 시일내에 잘못 된 부분은 업데이트 될 수 있도록 하겠습니다. 다른 문의 사항이 있으시면 편하게 질문 게시판 남겨주세요!

infi_duk · Answer

친절한 답변 정말 감사합니다!!!! 답변해주신 내용 중, addItem 부분에 추가로 궁금한 점이 생겨 댓글로 질문 드립니다..!! 현재 소스 상으로 addItem 에서 id 는 todoList length (todoList 원소 개수) 에 + 1 한 값을 할당하는데 만약 todoList array 에 3개의 원소가 있고 (샘플 데이터 기준 id 0, 1, 2), 세 번째 원소만 남기고 삭제했다고 가정한 상태에서 (id 2) 새로운 todo Item 을 추가하면 id 값이 1 + 1 을 한 값인 2 로 들어가서 key 가 중복되는 게 아닌가 하는 생각이 들어서 질문 드립니다.. ㅎㅎㅠㅠㅠㅠ 감사합니다!!!