JS에서 module을 여러번 import해도 한번만 실행되는 이유가 궁금합니다.

Question

저는 서로 다른 파일에서 같은 모듈에서 생성된 객체를 import해서 불러올 때 해당 객체는 같은 객체인가 테스트 해보았습니다. 파일구조- index.html - src - index.js - module.js - other.js index.html... 생략 ... 생략 //index.js import { obj } from './module.js';console.log('index 실행'); window.obj1 = obj; //module.js console.log('module 실행');export const obj = { a: 20 }; //other.js import { obj } from './module.js';console.log('other 실행'); console.log(obj === window.obj1); //콘솔 결과module 실행index 실행other 실행true 저는 import문을 실행할 때 마다 해당 모듈파일이 실행되는 줄 알았습니다. 예를 들어 index.js 에서 import할 때 module.js에서 obj를 생성해서 반환해주고, other.js에서 import할 때 다시 module.js가 실행되어 새로운 obj를 생성해서 반환해주는 식으로 동작 할 줄 알았습니다. 그래서 index.js에서 불러온 obj와 other.js에서 불러온 obj는 서로 다른 객체일 줄 알았습니다.하지만 결과는 처음으로 (index.js안에서) import될 때만 module.js가 실행되었고, index.js에서 불러온 obj와 other.js에서 불러온 obj는 서로 같은 객체라고 나왔습니다.그래서 저는 js에서 모듈이 어떻게 동작하는지 알고싶습니다.1. 위에서 왜 module.js는 한번만 실행되었을까요? 2. js의 모듈이 어떻게 동작하나요? 3. 제가 구글링을 해보았는데 원하는 결과를 못찾아서 모듈 동작 원리에 대한 글링크가 있다면 공유해주실 수 있을까요??

cppp · Answer

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#other_differences_between_modules_and_standard_scripts js모듈은 말씀대로 한 번만 실행되는게 맞는 것 같습니다. 정확한 설명은 더 찾아봐야 겠지만, 아마 Static vs Dynamic import의 차이가 아닐까 싶네요. 브라우저의 일을 줄이기 위해서 브라우저 단에서 모듈 하나하나씩을 바로 컴파일하는게 아닌가 싶습니다. 틀린게 있다면 지적 부탁드립니다^^

JS에서 module을 여러번 import해도 한번만 실행되는 이유가 궁금합니다.

1개의 답변

#module 목록