removeItem 에서 element 가 하나 남았을 때 삭제가... - 인프런

Typescript with Vue 실전 프로젝트

Vuex Store 개발하기

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

작성

262

안녕하세요!!

먼저 좋은 강의 올려주셔서 감사하다는 말씀 드리고 싶습니다!!!!! 공부하는 데 정말 많은 도움을 받고 있습니다 ㅎㅎ

강의 보면서 프로젝트 진행하던 중, TODO Item 항목을 삭제하는 부분에서 문제가 생겨 질문드립니다..!!

다른 경우는 삭제가 잘 되는데, 배열 안의 원소가 하나 남았을 때는 삭제가 되지 않았습니다 ㅠㅠ

return state.todoList.splice(id, 1);

그래서 이 부분을 아래와 같이 index 를 찾아서 splice 하도록 수정해 봤습니다.

return state.todoList.splice(state.todoList.findIndex(item => item.id === id), 1);

그랬더니 잘 동작하긴 하는데.. 혹시 제가 소스를 잘못 작성한건지.. 이렇게 고쳐서 진행해도 되는지.. 여쭤보려고 질문 드립니다 ㅠㅠㅠ

감사합니다!!

답변 2

지식공유자

안녕하세요!

일단 보내주신 코드는 올바른 접근 방법입니다.

보통 데이터에서 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와 인덱스가 동일하지 않기때문에 이 추가된 아이템은 삭제가 되지 않습니다.

이에 따라 혼동을 드린 점 정말 죄송합니다 ㅠㅠ

빠른 시일내에 잘못 된 부분은 업데이트 될 수 있도록 하겠습니다.

다른 문의 사항이 있으시면 편하게 질문 게시판 남겨주세요!

질문자

친절한 답변 정말 감사합니다!!!!

답변해주신 내용 중, addItem 부분에 추가로 궁금한 점이 생겨 댓글로 질문 드립니다..!!

현재 소스 상으로 addItem 에서 id 는 todoList length (todoList 원소 개수) 에 + 1 한 값을 할당하는데

만약 todoList array 에 3개의 원소가 있고 (샘플 데이터 기준 id 0, 1, 2),

세 번째 원소만 남기고 삭제했다고 가정한 상태에서 (id 2)

새로운 todo Item 을 추가하면 id 값이 1 + 1 을 한 값인 2 로 들어가서 key 가 중복되는 게 아닌가 하는 생각이 들어서 질문 드립니다.. ㅎㅎㅠㅠㅠㅠ

감사합니다!!!