JavaScript의 export와 import: 모듈 내보내기·가져오기 완벽 정리

JavaScript의 내보내기(Export)와 가져오기(Import)란?

JavaScript의 모듈 시스템에서 export(내보내기)는 한 파일에 작성된 함수, 객체, 변수 등을 다른 파일에서도 사용할 수 있도록 외부로 공개하는 기능입니다. 반대로 import(가져오기)는 내보내진 요소를 다른 파일로 불러와 재사용하는 기능이죠. 이 두 가지를 활용하면 코드를 기능별로 분리해 관리할 수 있어 유지보수성과 가독성이 크게 향상됩니다.

참고 − 이 예제를 실행하려면 localhost 서버를 구동해야 합니다.

다음은 JavaScript에서 내보내기와 가져오기를 구현한 전체 코드입니다 −

INDEX.html

예제

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Exports and imports in JavaScript</h1>
<button class="Btn">IMPORT</button>
<div class="result"></div>
<h3>Click on the above button to import module</h3>
<script src="script.js" type="module"></script>
<script src="sample.js" type="module"></script>
</body>
</html>

script.js

import test from './sample.js';
document.querySelector('.Btn').addEventListener('click',()=>{
test();
})

sample.js

let resultEle = document.querySelector(".result");
export default function testImport(){
resultEle.innerHTML = 'Module testImport has been imported';
}

코드 동작 원리

먼저 sample.js 파일에서 testImport 함수를 export default 키워드로 내보냈습니다. default export는 하나의 모듈당 단 하나만 지정할 수 있으며, 가져올 때 중괄호 없이 임의의 이름으로 받을 수 있다는 특징이 있습니다.

그다음 script.js에서는 import test from './sample.js' 구문으로 해당 함수를 가져온 뒤, 버튼 클릭 이벤트가 발생하면 test()를 호출합니다. 주목할 점은 HTML에서 스크립트를 불러올 때 type="module" 속성을 반드시 지정해야 한다는 것입니다. 이 속성이 있어야 브라우저가 해당 파일을 ES 모듈로 인식하고 import/export 문법을 처리할 수 있습니다.

출력 결과

JavaScript의 export와 import: 모듈 내보내기·가져오기 완벽 정리

'IMPORT' 버튼을 클릭하면 −

JavaScript의 export와 import: 모듈 내보내기·가져오기 완벽 정리

버튼을 클릭하는 순간 sample.js에서 내보낸 testImport 함수가 실행되며, 화면에는 'Module testImport has been imported'라는 메시지가 표시됩니다. 이처럼 export와 import를 사용하면 여러 파일에 걸쳐 코드를 깔끔하게 분리하고 재사용할 수 있습니다.