JavaScript에서 링크 클릭 시 오류

예상치 못한 링크 이동과 관련된 오류를 살펴보겠습니다. 예를 들어 다음과 같은 링크가 주어졌다고 가정해 보겠습니다:

<a href="">link</a>

링크를 변수로 가져옵니다:

let link = document.querySelector('a');

링크에 클릭 이벤트 핸들러를 바인딩합니다:

link.addEventListener('click', function() {
	console.log(this.textContent);
});

여기서 예상치 못한 일이 발생합니다. 코드는 정확하지만, 콘솔에 출력이 나타나지 않습니다. 그 이유는 클릭 시 링크로 이동이 일어나기 때문입니다. href 속성에 아무것도 지정되어 있지 않기 때문에, 링크는 단순히 현재 페이지를 가리킵니다.

이는 링크를 클릭하면 페이지가 새로고침됨을 의미합니다. 즉, 데이터가 콘솔에 출력된 후 페이지가 새로고침되고, 콘솔이 비워지게 됩니다.

주의 깊게 관찰하면, 클릭하는 순간 데이터가 콘솔에 잠시 나타났다가 사라지는 것을 볼 수 있습니다. 이것이 이 오류의 특징적인 징후입니다.

이 문제를 해결할 수 있는 방법을 살펴보겠습니다.

첫 번째 해결책

링크의 href에 해시 기호(#)를 넣습니다. 이렇게 하면 링크가 현재 페이지의 특정 위치를 가리키게 되어 클릭 시 새로고침이 발생하지 않습니다. 수정해 보겠습니다:

<a href="#">link</a>

보다 발전된 방법은 preventDefault 메서드를 사용하여 기본 동작을 취소하는 것입니다:

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});