JavaScript 모듈 시스템에서는 크게 두 가지 방식으로 값을 내보낼 수 있습니다. 바로 기본 내보내기(Default Export)와 명명된 내보내기(Named Export)입니다.
두 방식의 핵심적인 차이는 다음과 같습니다.
- 기본 내보내기(Default Export): 파일마다 단 하나만 존재할 수 있으며, 가져올 때(import) 원하는 이름을 자유롭게 지정할 수 있습니다.
- 명명된 내보내기(Named Export): 한 파일에 여러 개를 만들 수 있으며, 반드시 내보낼 때 사용한 이름 그대로 중괄호({ }) 안에 넣어 가져와야 합니다.
예제 코드
아래 예제는 JavaScript에서 기본 내보내기와 명명된 내보내기의 차이를 보여주는 코드입니다.
<!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>Default export vs Named Export</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above export function as named and default export</h3>
<script src="script.js" type="module">
</script>
</body>
</html>sample.js
먼저 함수를 내보내는 모듈 파일입니다. testImport 함수는 기본 내보내기로, tellTime 함수는 명명된 내보내기로 작성했습니다.
export default function testImport(){
return 'Module testImport has been imported'+'';
}
export function tellTime(){
return new Date();
}script.js
이제 위에서 내보낸 함수들을 가져와 사용하는 파일입니다. 기본 내보내기는 이름을 지정하지 않고 바로 받고, 명명된 내보내기는 중괄호 안에 정확한 이름을 적어 가져오는 것을 확인할 수 있습니다.
import defaultExport from "./sample.js";
import {tellTime} from "./sample.js";
let resultEle = document.querySelector('.result');
document.querySelector('.Btn').addEventListener('click',()=>{
resultEle.innerHTML+=defaultExport();
resultEle.innerHTML+=tellTime();
})실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 기본 내보내기로 가져온 함수의 반환 문자열과, 명명된 내보내기로 가져온 현재 날짜·시간 정보가 함께 출력됩니다.
정리
| 구분 | 기본 내보내기(Default) | 명명된 내보내기(Named) |
|---|---|---|
| 파일당 개수 | 1개만 가능 | 여러 개 가능 |
| import 방법 | 임의의 이름 사용 가능 | 중괄호 { } 안에 원래 이름 사용 |
| 선언 방법 | export default | export |
모듈에서 대표적인 하나의 기능(클래스, 컴포넌트 등)을 제공할 때는 기본 내보내기를, 유틸리티 함수처럼 여러 기능을 제공할 때는 명명된 내보내기를 사용하는 것이 일반적인 관례입니다.