서론
코딩을 하다보면 기능별로 나누어 모듈화를 해야한다. 모듈화를 통해 독립적으로 기능들을 관리하여 유지보수를 수월하게 할 수 있기 때문이다.
javascript에서는 export를 사용하여 간단하게 함수, 객체, 값 등을 내보낼 수 있고, import를 통해 내보내진 것들을 사용할 수 있다.
export, import된 모듈은 무조건 엄격모드로 설정된다.
본론
1. 내보내기
JS에서 내보내기 하는 방법은 2가지가 있다.
1-1. export
export는 named export인데 export한 것들의 이름을 통해 나중에 import 시에 사용을 한다는 것이다.
// export1.js
export const name = "mahns";
export const age = 345;
// export2.js
const name = "mahns";
const age = 345;
export { name, age }// import.js
import { name, age } from "./src/export1.js"위에서 보는 것처럼 name과 age의 이름을 통해서 가져오기 때문에 이름을 변경해서 사용할 수 없고 import 시에는 import { name, age } from "./src/export1.js"와 같이 사용할 수 있다.
1-2. export default
그에 반해 export default는 default export의 방법으로 말 그대로 해당 모듈은 기본적으로 이것만! export한다는 말로 해석하면 되겠다.
// export.js
export default function exportFunction() {} // import.js
import exportFunction from "./export.js"2. import
import는 위 export 예제에서와 같이 사용할 수 있다.
import { named, exported, value } from "./src/export.js"
import defaultExportValue from "./src/export.js"named export 된 것은 하나 혹은 다수를 가져올 수 있는 반면 default export된 것은 {}없이 사용할 이름을 아무거나 지정하여 가저올 수 있다. import하는 곳에서 어떤 이름을 지정하더라도 그것은 export default된 것을 사용하기 때문이다.
추가적인 문법을 보자면, 아래와 같은 것들이 있다.
import * from "./src/export.js" // export.js에 있는 모든 export된 값을 import
import { namedExportValue as myName } from "./src/export.js" // named export 된 것을 import 할 때 변수명 변경하는 방법참고 자료
All is well 🎵