[JS] export & import

---

알고있으면 좋은 Javascript Tip✨

---

export

• 파일이나 모듈안의 함수나, 객체를 export 하는데 사용된다.
• export에는 Named exports와 Default exports 두가지 방법이 있다.

(1) Named exports

• Named exports는 여러값을 export 하는데 유용하다.
• export 된 이름을 사용하여 import 하여 사용할 수 있다.

// 개별로 선언 export
export const arrs = [10, 20, 30, 40]; 

// 묶어서 export
export { arrs2, getName };

const arrs2 = [100, 200, 300, 400];
function getName() {
    return "aaaaaaaaa";
}

(2) Default exports

• 모듈 당 딱 한 개의 default export만 있어야 한다.
• default export로 객체, 함수 클래스 등이 될 수 있다.

let box = function box(x) {
    return x * y * z;
}
export default box;

(3) 다시 내보내기 / 조합

• 부모 모듈이 자식 모듈을 가져와서 다시 내보낼 수도 있다.
• 쉽게 말해, 여러 개의 모듈을 모아놓을 하나의 모듈을 만들 수 있다.

export design from 'controlls.js';

위 구문은 아래와 동일하게 작동한다.

import design from 'controlls.js';
export design;

 

import

• 외부 스크립트 또는 외부 모듈의 export된 함수, 객체를 가져오는데 사용된다.

(1) 모듈 전체 가져오기

import * as allAPI from './api.js';

(2) default export 값 가져오기

// export 된 모듈 사용
import $mapPin from './mapPin.js';


// mapin.js 파일 만들어서 export 
export default function mapPin(){
}