export / export default 그리고 import

들어가며

코딩을 하다보면 기능별로 나누어 모듈화를 해야한다.
모듈화를 통해 독립적으로 기능들을 관리하여 유지보수를 수월하게 할 수 있기 때문인데,

javascript에서는 export를 사용하여 간단하게 함수, 객체, 값 등을 내보낼 수 있고, import를 통해 내보내진 것들을 사용할 수 있다.

참고로 export, import된 모듈은 무조건 엄격모드로 설정된다.
(아래 링크에서 정리를 잘 해두었다.)

https://velog.io/@mahns/use-strict

본론으로 돌아가서,
먼저 export를 보겠다.

export에는 제목에서 알 수 있듯이, 종류가 2가지가 있다.

• export
• export default

export

export는 named export인데 export한 것들의 이름을 통해 나중에 import 시에 사용을 한다는 것이다.

// export.js

export const name = "mahns";
export const age = 345;

or

const name = "mahns";
const age = 345;

export { name, age }

// import.js

import { name, age } from "./export.js"

위에서 보는 것처럼 name과 age의 이름을 통해서 가져오기 때문에 이름을 변경해서 사용할 수 없고 import 시에는 import { something } from "where"을 통해 사용할 수 있다.

export default

그에 반해 export default는 default export의 방법으로 말 그대로 해당 모듈은 기본적으로 이것만! export한다는 말로 해석하면 되겠다.

또다른 차이점으로는 var, let, const는 export default 할 수 없다는 것도 알아두자.
✅ MDN 사이트에는 var, let, const를 export default 할 수 없다고 나와있는데, 에러 없이 잘 작동하는 것을 발견하였다. 이유는 잘 모르겠다...

// export.js

export default function test() {} 

// import.js

import test from "./export.js"

import

이제 import에 대해 정리를 하려는데,,,
이미 위 예제에서 스포를 너무 많이 해버렸기 때문에 간단히 넘어가자.

import { named, exported, value } from "where"
import default-exported-value from "where"

위 코드에서 보는 것과 같이 named export 된 것은 하나 혹은 다수를 가져올 수 있고, default export된 것은 {}없이 사용할 이름을 아무거나 지정하여 가저올 수 있다.

추가적인 문법을 보자면, 아래와 같은 것들이 있다.

import * from "where" // where에 있는 모든 export를 import
imoprt { named-exported-value as myName } from "where" // alias 지정

참고 자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import