[Javascript] 모듈로 설정된 파일의 변수는 전역 변수가 아니다!

🤔 문제

바닐라 자바스크립트로 프로젝트를 진행하던 중

html에 자바스크립트 파일을 연결하던 부분을 변경하게 되었다.

단순히 타입을 모듈로 변경한 것이었다.

<script type="module" src="app.js" defer></script>

그런데 이렇게 타입을 지정하니까

js 파일에서 삽입한 코드의 이벤트 함수를 인식하지 못했다.

버튼을 눌러도 아무런 반응이 없었다.

// box 안에 버튼 넣어주기
const  box = document.querySelector(".box");
box.innerHTML = `
    <button onClick="handleClick()">Click!</button>
`;

// 버튼의 이벤트 함수
const handleClick = () => {
  console.log("hi");
};

🔑 해결

이 문제는 전역에서 해당 handleClick 함수를 찾지 못해 생기는 것이었다.

타입을 모듈로 지정하면 해당 파일만의 스코프가 만들어진다.

그러므로 모듈로 지정하기 전에는

handleClick === window.handleClick

이었다면 모듈로 지정한 후에는 아닌 것이다.

해결 방법은 두 가지가 있다.

1. 이벤트 함수를 전역 함수로 선언하기

window.handleClick = () => {
  console.log("hi");
};

2. 해당 버튼을 찾아 이벤트리스너로 이벤트 함수 부여하기

const button = box.querySelector("button");

button.addEventListener("click", () => {
  alert("hi");
});

역시 전자가 훨씬 간편하다.
앞으로 유의해서 코드를 짜야겠다.