이번 포스트에서는 JavaScipt에서 모듈을 내보내고(export) 가져오는(import) 방법에 대해 다뤄보겠습니다.
html 파일에 두 개의 JavaScipt 파일을 가져옵니다.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module" src="first.js"></script>
<script type="module" src="second.js"></script>
</head>
<body></body>
</html>파일 자체를 모듈로 만들 것이기 때문에 type="module"로 지정합니다. 따로 모듈 타입으로 지정해 주지 않으면, 각 JavaScipt 파일은 서로 연동이 되어 다른 파일에 있는 변수에 접근할 수도 있고 내용을 변경할 수도 있습니다. 따라서 예상치 못한 버그가 만들어질 수 있습니다.
내보내기 (export)
first.js
const a = 1;
const b = 2;
export { a }; // 1
export default b; // 2
export const c = 3; // 3- export 할 때 default가 아니면 중괄호를 이용하여 export를 합니다. 여러 개를 한 번에 export 할 수 있습니다.(ex. export {a, b, c};)
- 한 파일 안에서 default로 보낼 수 있는 것은 한 개입니다.
- export(또는 export default) 하면서 동시에 변수나 함수를 선언할 수 있습니다.
가져오기 (import)
second.js
import b, { a, c } from './first.js';
console.log(a, b, c); // 1, 2, 3first.js 파일에서 default로 내보내진 b는 중괄호 없이 import 할 수 있습니다. 그 외에 export된 a, c는 중괄호를 이용하여 import 합니다.
b, c를 d, e로 바꿔서 import 하기
import d, { a, c as e } from './first.js'; // b, c -> d, e
console.log(a, d, e); // 1, 2, 3b는 first.js 파일에서 default로 내보내졌기 때문에 아무 키워드를 사용할 필요 없이 바로 d로 import 할 수 있습니다. 반면, c는 default로 내보내지지 않았기 때문에 as라는 키워드를 이용하여 이름을 바꿉니다.
잘못된 내용이 있다면 댓글로 알려주세요!🤗
느려도 꾸준히