export / import

🔴모듈 내보내고 가져오기(export / import)

🔴default export / named export

---

export

선언부 앞에 export 붙여준다.

변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다.

// 배열 내보내기
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// 상수 내보내기
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// 클래스 내보내기(끝에 ;_세미콜론을 붙이지 않음)
export class User {
  constructor(name) {
    this.name = name;
  }
}

// 함수 내보내기(끝에 ;_세미콜론을 붙이지 않음)
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

---

선언부와 떨어진 곳에 export 붙이기

선언부와 export가 떨어져 있어도 내보내기가 가능하다. 함수를 먼저 선언한 후, 마지막 줄에서 내보낸다.

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // 두 함수를 내보냄

---

import

// 📁 main.js
import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

---

import할 것이 많다면 import * as <obj> 처럼 객체 형태로 원하는 것들을 가지고 올 수 있다.

// 📁 main.js
import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');

> say로 묶어서 import해오고 사용할 때 객체에서 값 불러오듯이 사용한다.

---

as를 사용하여 이름을 바꿔서 import 

// 📁 main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

> sayHi를 hi로, sayBye를 bye로 이름을 바꿔서 import해온다.

---

export에도 as를 사용할 수 있다.

// 📁 say.js
...
export {sayHi as hi, sayBye as bye};

> sayHi와 sayBye를 각각 hi와 bye로 이름을 바꿔서 export해준다.

⬇️⬇️

// 📁 main.js
import * as say from './say.js';

say.hi('John'); // Hello, John!
say.bye('John'); // Bye, John!

> 다른 모듈에서 이 함수들을 import할 때 as로 별칭을 지정한 이름으로 import해온다.

---

Default Export

• 한 파일 내에서 단 한개의 변수/클래스/함수만을 Export 할 수 있다.
• from 뒤에 명시한 파일에서 단 한개의 모듈만 가져오기 때문에 as 키워드 없이 원하는대로 이름을 바꿀 수 있다.
• default를 붙이면 익명의 변수/클래스/함수로 export할 수 있다.(default없으면 오류발생)

// export
const MyComponent = () => {}
export default MyComponent;

// import
import MyComponent from "./MyDefaultExport";

---

// export
const MyComponent = () => {}
export default MyComponent;


// import
// default로 export한 모듈은 어떤 이름으로든지 import할 수 있다.
// 1.
import MyDefaultComponent from "./MyDefaultExport";
// 2.
import NewComponent from "./MyDefaultExport";

---

파일 하나에는 보통 하나의 export default가 있다. 이렇게 default를 붙여서 모듈을 export하면 중괄호 { } 없이 모듈을 import해 올 수 있다.

---

Named Export 

• 한 파일 내에서 여러개의 변수/클래스/함수를 Export 할 수 있다.
• Import할 때 as 키워드를 사용해서 다른 이름을 지정할 수 있다.

 

✔️named export 한 모듈을 가져오려면 중괄호가 필요하고, default export 한 모듈을 가져오려면 중괄호가 필요하지 않다

 

 

 

 

🔗참고🔗

https://chiefcoder.tistory.com/47

https://ko.javascript.info/import-export