import와 export는 자바스크립트의 코드를 모듈화 할 수 있는 기능이다.
기본적으로 자바스크립트의 유효 범위는 전역으로 시작한다.
<!-- index.html -->
<body>
<script src="a.js"></script>
<script src="b.js"></script>
<script>
getTotal(); // 200
</script>
</body>
// a.js
var total = 100;
function getTotal() {
return total;
}
// b.js
var total = 200;
따라서 이런 경우 원하는 결과가 나오지 않는다
자바스크립트는 기본적으로 변수의 유효 범위가 전역으로 잡히기 때문에 네임스페이스 모듈화 패턴이나 모듈화 라이브러리를 이용해 모듈화 기능을 구현해왔다.
export 변수, 함수
다른 파일에서 가져다 쓸 변수나 함수의 앞에 export
라는 키워드를 붙여서 사용한다.
export
된 파일은 import
로 불러와 사용 가능하다.
import {불러올 변수 또는 함수 이름} from '파일경로';
export
된 변수나 함수를 {}
에 선언한 뒤 해당 파일이 있는 경로를 적어준다.
//math.js
export var pi = 3.14;
//app.js
export {pi} from './math.js';
console.log(pi); // 3.14
위 코드는 math.js
라는 파일에서 pi
를 export 하고 app.js
파일에서 import 하여 콘솔창에 출력해주는 코드이다.
//math.js
export var pi = 3.14;
export function sum(a, b) {
return a + b;
}
import { sum } from './math.js';
sum(10, 20); // 30
위 코드는 math.js에 두 숫자의 합을 구하는 sum() 함수를 익스포트 한 뒤 app.js에서 임포트하여 사용한 코드이다.