#8 import / export

1. import / export

/* file "a.js" */
// import func1 from "b.js"
import {func1} from "./b.js";

console.log(func1());	// It's b.js func1




/* file "b.js" */
// export func1
export const func1 = function() {
    return "It's b.js func1";
}

• JavaScript ES6부터는 import, export 를 사용하여 자바스크립트 파일을 모듈처럼 import하고 export할 수 있음
  
  
• export를 변수 앞에 붙이는 것으로 다른 파일에서 import 가능하도록 할 수 있음
  
  
• import {<가져올 변수 이름>, ...} from "<모듈명>"; 와 같이 import문을 실행하여
  다른 파일(모듈)의 데이터를 가져올 수 있음
  
  
• 가져올 변수명들은 중괄호 안에서 콤마(,)로 구분하여 나열 가능
  
  
• 단, 이 기능을 사용할 때 script 태그에서 type="module" 속성값을 추가해주거나 node.js의 경우
  package.json 파일에 "type": "module" 을 추가해주지 않으면 module이 아닌 곳에서
  import문의 사용은 불가능하다는 에러가 발생
  
  
• import, export문은 블록 내에서는 사용 불가능(전역에서만 사용가능)

 

 

2. 전체 import

/* file "a.js" */
// import all from "b.js"
import * as mod_b from "./b.js";

console.log(mod_b.func1());	// It's b.js func1
console.log(mod_b.func2());	// It's b.js func2



/* file "b.js" */
// export func1
export const func1 = function() {
    return "It's b.js func1";
}

// export func2
export const func2 = function() {
    return "It's b.js func2";
}

• import * as <모듈이름> from "<모듈명>;  과 같이 모듈 전체를 import할 수도 있음
  
  
• 이 경우 <모듈이름>.<export된 데이터> 의 형태로 접근 가능

 

 

3. 선언 이후 export

/* file "a.js" */
// import func1 from "b.js"
import {func1} from "./b.js";

console.log(func1());	// It's b.js func1




/* file "b.js" */
// declare func1
const func1 = function() {
    return "It's b.js func1";
}

// export func1
export { func1 }

• 선언이 끝난 이후에도 export { <export할 변수들=""> } 의 형태로 </export할> export가 가능

 

 

4. export as

/* file "a.js" */
// import f1 from "b.js"
import {f1} from "./b.js";

console.log(f1());	// It's b.js func1




/* file "b.js" */
// declare func1
const func1 = function() {
    return "It's b.js func1";
}

// export func1
export { func1 as f1 }

• export { <export할 변수> as <별칭> } 의 형태로 export에서도 as를 사용 가능
  
  
• export as를 사용할 경우 import 할 때 별칭을 사용해야함

 

 

5. export default

/* file "a.js" */
// import f1 from "b.js"
import f1 from "./b.js";

// import f2 from "c.js"
import f2 from "./c.js";

console.log(f1());	// It's b.js func1
console.log(f2());	// It's c.js func1



/* file "b.js" */
// export func1 as default
export default function func1() {
    return "It's b.js func1";
}


/* file "c.js" */
// declare func1
const func1 = function() {
    return "It's c.js func1";
}

// export func1 as default
export { func1 as default }

• export default 또는 선언 이후 export { <export할 변수> as default } 의 형태로 default하게 export가 가능
  
  
• export default는 각 파일마다 하나의 변수만 가능
  
  
• default로 export할 경우 import시에 중괄호가 필요없고 이름을 import시에 임의로 정할 수 있음
  => 그러나 혼란을 줄 수 있기에 원래의 이름 그대로 사용하는것이 약속
  
  
• 보통은 default로 export할 하나의 메소드가 값만이 존재하는 파일에서만 사용하는것이 좋음
  
  
• 아예 사용하지 않고 named export만을 사용할 것을 권장하는 경우도 많음

 

 

6. export from

/* file "a.js" */
// import f1 from "b.js"
import { f1 } from "./b.js";

console.log(f1());	// It's c.js func1



/* file "b.js" */
// import f1 from "c.js" and export again
export { f1 } from "./c.js";



/* file "c.js" */
// declare func1
const func1 = function() {
    return "It's c.js func1";
}

// export func1 as f1
export { func1 as f1 };

• export { ... } from "module" 의 형태로 다른 파일에서 import해온 데이터를 그대로 다시 export 할 수 있음
  
  
• 사용자가 여러 파일의 데이터를 하나의 파일에서 import 할 수 있게 해주는 index 파일을 만들기 위해 사용
  
  
• 모든 데이터를 다시 export 하는 export * from "module" 을 실행 시 default export 된 데이터는 제외됨
  
  
• default export 된 데이터는 export { default [as ...] } from "module" 과 같이 별도로 처리해주어야함