모듈 import, export

✍️ import로 불러오는 방법이 참 다양한데, 한번 정리를 해보면 좋을 것 같아 export 와 함께 정리 해보았다.

export

named export

방법

1. 변수, 함수, 클래스 선언 시 앞에 붙이면 내보내기 가능

   ⚠️ 클래스, 함수 내보낼 땐 끝에 ;(세미콜론) 붙이지 말기

   //1. 변수
   export let today = new Date();
   //2. 함수
   export function hello(){
   	alert('hello!');
   }
   export function bye(){
   	alert('bye!');
   }
   //3. 클래스
   export class User{
   	constructor(name) {
       this.name = name;
     }
   }

2. 선언 부와 떨어진 곳에 export 실행

   //1. 변수
   let today = new Date();
   //2. 함수
   function hello(){
   	alert('hello!');
   }
   function bye(){
   	alert('bye!');
   }
   //3. 클래스
   class User{
   	constructor(name) {
       this.name = name;
     }
   }
   
   export {today, hello, bye, User};

3. 이름 바꿔 내보내기

   export {hi as sayHi, bye as sayBye};

default export

export default

• 해당 모듈엔 개체가 하나만 있다는 것을 나타냄.

방법

1. 기본형

   • 가져올 때 {} 가 필요 없음.

   export default class User { 
     constructor(name) {
       this.name = name;
     }
   }

   import User from './user.js';

2. 선언 부와 떨어진 곳에 default 설정 하기

   function hello(){
   	alert('hello!');
   }
   
   export {sayHello as default};

3. 하나의 모듈에 export 와 default export가 공존 할 때, 둘 다 불러오기

   export default class User {
     constructor(name) {
       this.name = name;
     }
   }
   
   export function sayHi(user) {
     alert(`Hello, ${user}!`);
   }

   import User, {sayHi} from './user.js';

import

방법

1. 낱개로 가져오기

   import { hello, bye } from './module.js';
   
   hello();
   bye();

2. 객체 형태로 가져오기

   import *as objname

   import *as say from './module.js';
   
   say.hello();
   say.bye();

3. 이름 바꿔 가져오기

   import { 원래이름 as 바뀐이름}

   import {hi as sayHi, bye as sayBye} from './module.js';
   
   sayHi();
   sayBye();

특징

1. named export 로 된 모듈 가져 올 때: export 이름과 import 이름이 동일해야함.

   import {User} from './user.js';

2. default export 로 된 모듈 가져 올 때: export 이름과 import 이름이 달라도 됨. (import 이름은 개발자 마음대로)

   import User from './user.js';  // ok
   import MyUser from './user.js'; // ok

   🔑 보통 파일 이름과 동일한 이름을 사용 함.

3. 블록 {...}안에선 동작하지 않음.

import()

import(module)

• 본래 import는 정적인 방식이나, import() 문법을 사용하면 동적으로 사용 가능함.

방법

1. promise chain

   let modulePath = prompt("어떤 모듈을 불러오고 싶으세요?");
   
   import(modulePath)
     .then(obj => <모듈 객체>)
     .catch(err => <로딩 에러, e.g. 해당하는 모듈이 없는 경우>)

2. async- await

   let {hi, bye} = await import('./module.js');

   let obj = await import('./module.js');
   let user = obj.default;

참고 문헌

• https://ko.javascript.info/import-export
• https://ko.javascript.info/modules-dynamic-imports
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import