JavaScript import에서 중괄호({ })를 사용해야 하는 이유와 방법

JavaScript import에서 중괄호({ })란 무엇인가?

ES6(ES2015) 모듈 시스템에서 named export(이름 있는 내보내기)로 지정된 함수나 변수를 가져올 때는 반드시 중괄호 { }를 사용해야 합니다. 반면 default export(기본 내보내기)는 중괄호 없이 가져올 수 있습니다.

또한 중괄호 안에서 as 키워드를 사용하면 가져오는 모듈의 이름을 원하는 대로 변경할 수 있습니다. 아래 예제를 통해 실제 동작 방식을 확인해 보겠습니다.

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;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Using '{ }' in javascript imports</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to execute the imported function</h3>
<script src="script.js" type="module">
</script>
</body>
</html>

script.js — 중괄호를 사용한 import

import {test,tellTime as showTime} from "./sample.js";
let resultEle = document.querySelector('.result');
document.querySelector('.Btn').addEventListener('click',()=>{
    resultEle.innerHTML+=test();
    resultEle.innerHTML+=showTime();
})

위 코드에서 주목할 점은 두 가지입니다. 첫째, sample.js에서 내보낸 test와 tellTime을 중괄호로 감싸서 가져왔습니다. 둘째, tellTime as showTime처럼 as 키워드를 사용해 tellTime 함수를 showTime이라는 새 이름으로 가져왔습니다.

sample.js — 모듈 내보내기

function testImport() {
    return "Module testImport has been imported" + "";
}
function tellTime() {
    return new Date();
}
export { testImport as test, tellTime };

sample.js에서는 export { testImport as test, tellTime } 구문을 통해 testImport 함수를 test라는 이름으로, tellTime 함수는 원래 이름 그대로 내보냅니다. 이렇게 내보낸 이름과 일치하는 식별자만 중괄호 안에 넣어 가져올 수 있습니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

JavaScript import에서 중괄호({ })를 사용해야 하는 이유와 방법

'CLICK HERE' 버튼을 클릭하면 가져온 두 함수가 실행되어 결과가 표시됩니다.

JavaScript import에서 중괄호({ })를 사용해야 하는 이유와 방법

정리

모듈에서 named export한 항목을 가져올 때는 중괄호 { }가 필수입니다.
중괄호 안의 이름은 내보낼 때 사용한 이름과 정확히 일치해야 합니다.
as 키워드를 사용하면 가져오는 모듈의 이름을 자유롭게 변경할 수 있습니다.
반면 export default로 내보낸 항목은 중괄호 없이 바로 가져올 수 있습니다.