자바스크립트 코드가 길어지면 파일을 분리하여 관리하는 것이 좋은 관습입니다. ES6의 import/export 문법을 활용하면 파일 간에 필요한 변수, 함수, 혹은 클래스를 선택적으로 내보내거나(import/export) 가져올 수 있습니다. 단, import로 가져온 값은 읽기 전용임을 유의하세요.
1️⃣ 기본 개념
ES6 모듈 사용 시 주의사항
- HTML에서 사용하기:
<script>태그에type="module"속성을 추가해야 합니다.<script type="module"> // ES6 모듈 문법 사용 가능 </script> - 파일 간 모듈화:
여러 JS 파일로 코드를 분리하여 관리하고, 필요한 파일에서 모듈을 import 해서 사용합니다.
2️⃣ export default / import
export default를 사용하면 한 파일에서 단 하나의 기본(default) 값을 내보낼 수 있습니다.
또한 import 시에는 임의의 변수명으로 가져올 수 있습니다.
예제
(library.js)
var a = 10;
export default a;
(index.html)
<script type="module">
import a from './library.js';
console.log(a); // 출력: 10
</script>
- 설명:
library.js파일에서 변수a를export default로 내보냅니다.index.html파일의 모듈 스크립트에서a라는 이름으로 import하여 사용할 수 있습니다.
3️⃣ Named export와 import
여러 변수를 한 번에 내보내고 싶다면 named export를 사용합니다.
예제
(library.js)
var a = 10;
var b = 20;
export { a, b };
(index.html)
<script type="module">
import { a, b } from './library.js';
console.log(a); // 출력: 10
console.log(b); // 출력: 20
</script>
- 설명:
export { a, b }구문을 사용해 여러 변수를 내보냅니다.- import 시 중괄호
{ }안에 내보낸 변수명을 명시하여 가져옵니다.
또한 export var a = 10;와 같이 내보내는 것도 가능합니다.
4️⃣ export default와 Named export의 동시 사용
동일 파일에서 기본 export와 named export를 함께 사용할 수 있습니다.
예제
(library.js)
var a = 10;
var b = 20;
var c = 30;
export { a, b };
export default c;
(index.html)
<script type="module">
import c, { a, b } from './library.js';
console.log(c); // 출력: 30
console.log(a); // 출력: 10
console.log(b); // 출력: 20
</script>
- 설명:
- 기본 export인
c는 import 시 맨 왼쪽에 위치시키고, - 나머지 named export 값들은 중괄호
{ }내에 나열합니다.
- 기본 export인
5️⃣ as 키워드를 활용한 별칭 사용
import할 때 as를 사용하여 변수명을 새롭게 지정할 수 있습니다.
예제
(library.js)
var a = 10;
var c = 30;
export { a };
export default c;
(index.html)
<script type="module">
import c, { a as 폭발 } from './library.js';
console.log(폭발); // 출력: 10
console.log(c); // 출력: 30
</script>
- 설명:
- named export로 내보낸
a를폭발이라는 별칭으로 import하여 사용할 수 있습니다.
- named export로 내보낸
6️⃣ * (별칭) 사용하여 전체 모듈 가져오기
내보낸 변수가 많을 경우, * 기호를 사용하여 모든 named export를 하나의 객체로 묶어 가져올 수 있습니다.
예제
(library.js)
var a = 10;
var b = 20;
var c = 30;
export { a, b };
export default c;
(index.html)
<script type="module">
import c, * as 변수모음 from './library.js';
console.log(변수모음.a); // 출력: 10
console.log(변수모음.b); // 출력: 20
console.log(c); // 출력: 30
</script>
- 설명:
as 변수모음은 library.js에서 내보낸 모든 named export를변수모음객체에 담아 import합니다.- 기본 export(
c)는 별도로 import하여 사용합니다.
7️⃣ 옛날 모듈 시스템과의 비교
과거에는 require와 module.exports를 사용하여 모듈식 개발을 진행했습니다.
예를 들면:
(export 하는 파일)
module.exports.a = 10;
(import 하는 파일)
var 가져온거 = require('./library.js');
- 설명:
- ES6의 import/export 문법이 등장하면서 위와 같은 방식은 점차 사용되지 않고 있습니다.
- 최신 브라우저와 Node.js 환경에서는 ES6 모듈 문법을 사용하는 것이 권장됩니다.
단, import/export 문법은 IE 등 일부 구형 브라우저에서 호환되지 않으므로, 일반 HTML/CSS/JS 프론트엔드 개발에서는 를 사용할 수 있습니다.
또는 모던 브라우저 환경에서는
<script type="module" src="경로"></script>를 사용하면 됩니다.
📌 정리
- export default:
- 한 파일에서 단 하나의 기본 값을 내보냄
- import 시 원하는 이름으로 가져올 수 있음
- Named export:
- 여러 값을 내보내고, import 시 중괄호를 이용해 명시적으로 가져옴
- as 키워드를 통해 별칭 지정 가능
- 모듈 전체 가져오기:
as구문을 사용하여 모든 named export를 하나의 객체로 import 가능
- 사용 환경:
- HTML에서 ES6 모듈 사용 시
<script type="module">필수 - 옛날 모듈 시스템(require, module.exports)은 현재 잘 사용되지 않음
- HTML에서 ES6 모듈 사용 시
