[JavaScript] remove() 와 removeChild() 의 차이점

프로젝트를 진행하다가 remove와 removeChild 의 기능은 비슷하나, 어떤 차이점이 있을지에 대한 의문이 들어 조사한 바를 바탕으로 글을 작성해본다.

MDN

Element.remove()

The Element.remove() method removes the element from the DOM.
: 요소.remove () 메소드는 DOM에서 요소를 제거합니다.

Node.removeChild()

The removeChild() method of the Node interface removes a child node from the DOM and returns the removed node.
: 노드 인터페이스의 removeChild () 메소드는 DOM에서 하위 노드를 제거하고 제거 된 노드를 반환합니다.

remove()

• remove는 노드를 메모리에서 삭제하고 종료한다
• 제거된 엘리먼트는 자바스크립트 엔진의 GC(Garbage Collection)에 의해 곧 메모리에서 지워진다.

removeChild()

• 노드를 삭제하는 것이 아니라, 메모리에 해당 노드는 그대로 존재하며, 부모-자식 관계를 끊어 DOM 트리에서 해제하는 것이다
• 최종적으로 관계를 끊은 해당 노드의 참조를 반환한다.
• 반환 값을 변수에 저장하지 않으면 삭제하는 노드의 참조가 더이상 없기 때문에, 자바스크립트 엔진의 GC(Garbage Collection) 에 의해 잠시 후 메모리에서 삭제된다.
• 반환된 노드 참조를 변수에 담아 다른 DOM 위치에 붙일 수 있다.

// 1. 반환 값을 변수에 저장하지 않아 DOM에서 제거되고 메모리에서도 곧 지워진다. 
node.removeChild(child); 
  
// 2. 반환 값을 변수에 저장하여 DOM에서 제거되지만 다시 불러올 수 있다.
let removed = node.removeChild(child);
// document.body.prepend(removed);의 형태로 다시 DOM에 붙일 수 있다.
document.body.prepend(removed); 

REFERENCE

• https://blogpack.tistory.com/683
• https://velog.io/@kaitlin_k/75-remove-removeChild