반응형
모듈 module
- import 혹은 export 구문을 사용
- 엄격 모드(strict mode)로 동작
- export는 변수, 함수 및 클래스를 내보내려면 문을 사용
- import문을 사용하여 다른 모듈에서 변수, 함수 및 클래스를 가져오기
- type="module" 웹 브라우저에 JavaScript 파일을 모듈로 로드하도록 지시하려면 script 태그에 사용
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import
import - JavaScript | MDN
정적 import 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용합니다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export
export - JavaScript | MDN
export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있습니다.
developer.mozilla.org
HTML 파일에서 모듈 스크립트 사용: HTML에서 스크립트를 로드할 때 type="module"을 사용하여 해당 스크립트가 모듈로 처리되도록 할 수 있습니다.
html
<body>
<script type="module" src="script.js"></script>
</body>
export
let count = 1;
export { count };
export let count = 1;
let count = 1;
const a = 0, b = 10;
export { a, b, count };
function increase() {
// ..
}
export { increase };
class Counter {
constructor() {
this.count = 1;
}
increase() {
this.count++;
}
}
export { Counter };
function add(x, y) {
return x + y;
}
class Person {
// ...
}
export { add, Person };
선언과 동시에 export
export const a = 'aaa';
export const b = 'bbb';
export function add(x, y) {
return x + y;
}
export class Person {
// ...
}
import
import { Counter } from 'module.js';
import { message} from 'module.js';
import { a, b } from './module.js';
let msg = 'Hi';
export { default as msg };
export default
모듈을 대표하는 하나의 값을 지정
export default 'msg';export default let msg = 'Hi';
import message from 'module.js';
export default function increase() {
// ..
}
export default class Counter {
// ...
}
다른 이름으로 export & import 하기
const abc = 'test';
export { abc as ddd };
// module.js
export const myFunction = () => {
console.log("Hello from myFunction!");
};
// script.js
import { myFunction } from './module.js';
myFunction(); // 출력: Hello from myFunction!
react 예시
import "./App.css";
import Home from "./components/Home";
import About from "./components/About";
import { Routes, Route } from "react-router-dom";
nodejs 예시
CommonJS 방식
const express = require('express');
const pkg = require('./package.json');
ES modules 방식
import crypto from 'crypto';
import pkg from './package.json';
반응형
'javascript+es6' 카테고리의 다른 글
| [ javascript ] 25. 정규표현식 ( 정규식 ) (2) | 2024.03.13 |
|---|---|
| [ javascript ] 24. window.localStorage (0) | 2023.11.28 |
| [ javascript ] 22. Prototype(프로토타입), 생성자함수 , 클래스 (0) | 2023.11.13 |
| [ javascript ] 21. 비구조화 할당 (구조분해) 문법 (0) | 2023.11.09 |
| [ javascript ] 20. 얕은 복사 VS 깊은 복사 (0) | 2023.11.08 |