event.preventDefault()

인스타그램 클론코딩을 하던 도중 한 가지 난관에 봉착했다. 댓글 다는 기능을 구현하려고 했는데 문제는 게시 버튼을 눌렀을 때 0.1초 정도 댓글이 보였다가 사라지는것이다. HTML 구조는 대략 이렇게 구성했다.

<div class="comment"></div>
<form class="comment-input">
  <input type="text" placeholder="댓글 달기..." class="input" />
  <button class="comment-btn">게시</button>
</form>

이런식으로 input과 button을 form 태그로 감싸준 후 form 태그에 submit 이벤트를 걸어서 엔터를 누르던 게시 버튼을 누르던 comment라는 class명을 가진 div에 자식으로 포함되도록 하였다. JavaScript 부분은 다음과 같다.

function handleComment() {
  for (let i = 0; i < commentForm.length; i++) {
    commentForm[i].addEventListener("submit", function (e) {
      e.preventDefault();
      const commentLi = document.createElement("li");
      const comment = commentInput[i].value;
      commentLi.innerHTML = `<strong>${commentId}</strong> ${comment}`;
      commentBox[i].appendChild(commentLi);
      commentInput[i].value = "";
    });
  }
}

submit 이벤트가 발생하면 li 태그를 생성 후 생성된 li 태그에 User id와 comment를 자식으로 포함시켜 주었다. 그리고 input창은 초기화를 시켜주었다. 댓글이 달렸는데 그 내용이 그대로 남아있으면 보기 안좋으니까.. 아 그리고 for 반복문 안에 이벤트를 준 이유는 피드가 여러개라 각 피드마다 댓글 기능을 구현해야 했기에 querySelectorAll을 이용해서 모든 form들을 잡아서 각각에 이벤트를 주었다. 어쨌든 submit 이벤트를 인자로 받아서 페이지 새로고침을 막기 위해 preventDefault() 메서드를 사용했다.

a태그와 submit 이벤트는 이벤트가 발생하면 창이 새로고침이 되면서 실행되는데 preventDefault()를 이용하여 이러한 상황이 발생하는 것을 막아주는 것이다. preventDefault()말고 이벤트 전파를 막는 방법이 3가지가 더 있다.

1. preventDefault(): 현재 이벤트의 기본 동작을 중지하는 것이다.
2. stopPropagation(): 현재 이벤트가 상위로 전파되는 것을 막는 것이다.
3. stopImmediatePropagation(): 현재 이벤트가 상위뿐만 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단하는 것이다.
4. return false: 네 번째는 위 3가지 방법과는 조금 다른 방법이다. jQuery를 사용할 때는 위의 두개 모두를 수행한 것과 같고, jQuery를 사용하지 않을때는 preventDefault()를 사용한 것과 같다.