초보 개발자

ES6 import export 본문

이것 저것

ES6 import export

taehyeki 2021. 9. 9. 21:58

ES6에서 지원하는 export 방법과 import 방법을 알아보자

// exchange.js
const dollarToWonRate = 1177.1;
const euroToWonRate = 1298.3;
const yenToWonRate = 10.8;
const cynToWonRate = 169.7;
// 첫 번째 export 방법
export function dollarToWonFn(dollar) {
    return dollar * dollarToWonRate;
};
// 두 번째 export 방법
const euroToWonFn = (euro) => {
    return euro * euroToWonRate;
};
export { euroToWonFn };
// default 키워드를 사용하여 export를 하는 방법
const yenToWonFn = (yen) => {
    return yen * yenToWonRate;
};
const cynToWonFn = (cyn) => {
    return cyn * cynToWonRate;
};
export default { yenToWonFn, cynToWonFn };
// calculate.js
// 첫 번째 import 방법 : Destructuring
import { dollarToWonFn } from './exchange.js';
console.log(dollarToWonFn(10)); // 11771
// 두 번째 import 방법 : Alias
import * as currency from './exchange.js';
console.log(currency.euroToWonFn(10)); // 12983
// export default를 import 하는 방법
import JpAndCn from './exchange.js';
console.log(JpAndCn.yenToWonFn(1000)); // 10800
console.log(JpAndCn.cynToWonFn(100)); // 16790
// 또는 아래 코드로 엔화와 위안화 변환 함수를 불러오는 것도 가능하다.
const { yenToWonFn, cynToWonFn } = JpAndCn;
console.log(yenToWonFn(1000)); // 10800
console.log(cynToWonFn(100)); // 16790

위와 같이 작성할 수 있다.

 

++++

export 시
funtion A = () {}
export B = function() {
 A() //A함수 사용
}
const C = function() {
 A()//A함수 사용
}
export { C };
여기서 중요한것이 B와 C를 내보내고 A는 내보내지 않았다.
B,C모두 A를 사용하고 있다
정작 B,C만 내보내도 A를 사용할 수 있는 것을 확인할 수 있다.

 

또한

import "my-module.js"; 처럼 단지 모듈 자체만 불러온다면

모듈내의 변수는 사용하지 못한다. 하지만 저 모듈이 실행은 된다. 

그래서 실험해본결과 a.js에 서버를 실행시킬 수 있는 코드를 작성하고

빈 파일b.js에 import "./a.js"를 불러오고 node b.js를 실행시켜보았더니 잘 실행이 되었다.

엄청신기...

 

'이것 저것' 카테고리의 다른 글

OAUTH  (0) 2021.09.27
callback funtion  (0) 2021.09.18
Understanding Dependencies  (0) 2021.09.08
BABEL  (0) 2021.09.02
append 와 appendChild 의 차이점 !! 비슷하지만 꽤 다르다!?  (0) 2021.08.31