Vanilla JS로 프로젝트를 하다보니, 리렌더링을 구현하는 것이 어려웠다.
React는 state의 변경을 감지해서 자동으로 리렌더링을 해주는데, 이에 익숙해져 버린 것이다.
그래서 나는 자식 노드를 제거하고 다시 렌더링 함수를 실행하는 방법을 선택했다.
물론, 이는 보여줘야하는 데이터가 늘어날 수록 효율적이지 않다.
다만, 토이 프로젝트에서는 그만큼의 데이터가 있지 않았기 때문에 이런 방법을 사용했다.

replaceChildren()

방법은 매우 간단하다.
여러 개의 자식 노드를 변경할 수 있는 replaceChildren() 메서드를 활용하는 것이다.
사용법은 아래와 같다.

replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /* … ,*/ paramN)

이 중에서 모든 자식 노드를 삭제하기 위해 아래 방법을 사용할 것이다.

myNode.replaceChildren();

replaceChildren() provides a very convenient mechanism for emptying a node of all its children. You call it on the parent node without any argument specified:
- MDN docs -

그렇다. 이 메서드는 인자에 아무것도 넣지 않는다면 자식 노드를 모두 비워준다.
한번의 메서드 사용으로 이를 구현할 수 있다..!

Node.hasChildNodes()와 같이 활용하기

자식 노드를 전부 지우는 것은 좋은데, 아무 때나 다 지우면 안될 수도 있다.
그래서, 분기 처리를 할 때 자식 노드의 존재를 확인한 뒤 진행하는 로직이 필요할 수 있다.
이 때 사용할 수 있는 메서드가 hasChildNodes()이다.
사용법은 아래와 같다.

node.hasChildNodes()

매우 심플하다. 자식 요소가 있는지 없는지 판단하고 싶은 노드에 hasChildNodes()를 사용하면 된다.
예시를 보자.

 // 자식 노드가 있는지 알고 싶은 노드
const parent = document.querySelector(".parent");

// 자식 노드가 있는지 판별
if(parent.hasChildNodes()){
  // 모든 자식 노드를 삭제한다.
  parent.replaceChildren();
}

remove(), removeChild()를 안 쓰는 이유?

물론, 이 메서드들도 자식 노드를 제거할 수 있다.
remove()는 본인을 지울 수 있고, removeChild()는 자식 노드를 지울 수 있다.
하지만, 두 메서드는 "자식 노드만 모두" 지우는 과정이 귀찮다.
굳이 그 기능을 하게 만드려면, 본인까지 삭제했다가 다시 렌더링하거나,
반복문을 돌려서 자식 노드가 존재하지 않을 때까지 지워주는 수 밖에..
필자는 이러한 방법이 너무나도 비효율적이라고 느껴서, 전체 삭제에 어울리지 않는다고 판단했다.

참고 자료

hasChildNodes() - MDN docs
replaceChildren() - MDN docs
hianna님 블로그
developer-talk님 블로그
meanbymin님 블로그