[Javascript] 목록의 자료를 삭제하는 방법(Array, Object)

Todo app을 만드는데 자료를 삭제하는 방법을 새롭게 알게되어 정리해봤다.

 

1. Array에 자료를 관리하는 방법

기존에 목록을 추가/삭제하는 방법은 아래와 같았다.

주로 Array형태로 자료를 저장/삭제했다.

// Array 형태의 자료관리
// selectedKeywords = ['A', 'B', 'C']
// 체크박스에 체크한 항목 추가/해제한 항목 삭제
function handleClick(e) {
  const value = e.target.value;
  const checked = e.target.checked;
  if(checked) {
    // 키워드를 추가한 경우
    props.onChange([...selectedKeywords, value]);
  } else {
    // 키워드를 삭제한 경우
    props.onChange(selectedKeywords.filter(keyword => keyword !== value));
  }
}

위의 예시는 자료 형태가 단순하지만 다양한 항목을 가진 자료도 Array로 관리했을 것 같다.

[{id, value, ...}, {id, value, ...}, ... ]이런 식으로 말이다.

 

2. Object에 자료를 관리하는 방법

새롭게 알게된 방법은 Object에 자료를 저장하는 방법이다.

// Object형태의 자료 저장/관리
const tasks = {
    1: { id: "1", text: "React Native", completed: false },
    2: { id: "2", text: "Expo", completed: true },
    3: { id: "3", text: "Javascript", completed: false },
  };
 
// task 추가
const addTask = () => {
    const ID = Date.now().toString();
    const newTaskObject = {
      [ID]: { id: ID, text: newTask, completed: false },
    };
    tasks = { ...tasks, ...newTaskObject };
  };
 
// task 삭제
const deleteTask = (id) => {
  // 현재 tasks를 복제한다
  const currentTasks = Object.assign({}, tasks);
  // id가 같은 항목 삭제
  delete currentTasks[id];
  tasks = currentTasks;
}
 

tasks라는 Object는 정보가 ID {id, text, completed} 로 이루어져 있다.

주의할 점은 항목이름인 ID를  [ID] : {id, text, completed}로 newTaskObject를 만들어야 한다는 점이다.

[ID]가 아닌 ID인 경우에는 ID가 문자 그대로 저장된다.

ID로 저장한 addTask함수는 ID : {id, text, completed} 를 저장했고, [ID]로 저장한 addTask2는 고유한id : {id, text, completed} 를 저장했다.

 

Object.assign(Obj1, Obj2)는 원래 Obj1과 Obj2의 모든 항목을 복사해 새로운 Obj를 반환해주는 함수이다.

위의 코드에서는 Object.assign({}, tasks)로 tasks의 복제본을 만든다.

자료가 id: {id, text, completed} 형태로 저장되어있기 때문에 delete currentTasks[id];로 쉽게 삭제할 수 있다.

 

delete연산자

delete연산자는 객체(Object)의 속성을 제거한다.

delete object.property
delete object['property']

속성만 알려주면 제거할 수 있기 때문에 Array에서 항목을 제거하는 것 처럼 filter를 사용하거나 반복문을 사용할 필요가 없다.

 

여러 항목을 관리하고, id를 통한 삭제 기능이 필요하다면 Array가 아니라 Object에 저장하는 것도 좋은 방법인 것 같다.

 

 

참고한 페이지

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Object.assign() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/delete

delete 연산자 - JavaScript | MDN