[JavaScript] Export Default 에 대해서

 

 

해당 게시글은 노마드코더의 "Export Default" 영상을

토대로 정리하여 작성하였다.

 

ES 모듈인 import export 에 대해 자세히 다뤄보면서

코드도 깔끔하게 정리하고, 애플리케이션 로딩 속도도 향상시켜보자!

 

 

 

---

 

Import & Export

간단하게 둘의 개념부터 집고 넘어가보자면,

 

import 문은

다른 모듈에서 내보낸 바인딩을 가져올 때 사용한다.

 

export 문은

자바스크립트 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용한다.

내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있다.

 

 

(1) Named Exports

많은 것들을 export / import 하고 싶을 때, Named Exports 를 사용한다.

파일 혹은 모듈이 원하는 만큼 많은 수의 Named Exports 를 가질 수 있다.

 

여기서 import 된 이름들은 반드시 export 된 이름과 같아야 한다.

이름이 다르다면 올바르게 작동하지 않을 것이다 !

하지만 이름을 바꾸어 사용하고 싶다면 'as' 키워드를 사용하면 된다.

// math.js
export const plus = (a,b) => a+b;
export const minus = (a,b) => a-b;

// main.js
import { plus } from "./math";
import { minus as subtract } from "./math";

plus(2,3);
subtract(2,3);

 

 

 

(2) Default Export

각 파일마다 단 한개의 default export 만 존재할 수 있고,

그 덕분에 import 가 더 간편해졌다 !

 

한개의 파일에서 모든 것을 export 하고, 모든 걸 import 해준다.

Named exports 처럼 각 함수를 하나하나 import 하는 것이 아니라,

이 모든 함수를 갖고 있는 하나의 객체를 디폴트로 export 하는 것이다.

 

그 후 원하는 이름으로 import 할 수 있다 !

// math.js
const plus = (a,b) => a+b;
const minus = (a,b) => a-b;

export default { plus, minus };

// main.js
import myMath from "./math";

myMath.plus(2,3);

 

 

 

(3) * Export

모든 export 된 내용을 import  하고 싶을 때 사용한다.

단, default export 가 없는 파일에서만 가능하다 !

여기서도 default export 와 같이 원하는 이름으로 import 할 수 있다.

// math.js
export const plus = (a,b) => a+b;
export const minus = (a,b) => a-b;

// main.js
import * from myMath from "./math";

myMath.plus(2,3);

 

 

 

---

 

 

 

이제 이들을 가지고 어떻게 사용하면 애플리케이션 로딩 속도를

빠르게 할 수 있을까?

 

• 필요한 것만 import 하기
• Dynamic import 사용하기 (사용할 모듈만 import 함)

 

처음에는 export 만 보고 이게 뭐야 !
했는데 때마침 노마드코더에서 이와 관련된 영상이 딱 올라와서

냅다 열심히 보고 빠르게 이해할 수 있었다 , ,

오늘도 쌤에게 무한한 감사를 . . ✨

 

 

 

 

 

© 참고

MDN Web Docs / import & export

노마드 코더 / Export Default 과연 제대로 알고 계십니까?

자바스크립트 Docs / import export