Module

Module

평소 그냥 이렇게 쓰는 것이다, 아무렇지도 않게 그냥 쓰던 것이 궁금해 졌다.

import, export, export default, import {something} from '...', as .....

코딩을 하다가 궁금해 져서 정리해 놓을까 한다.

• Named export

  연산.js
  export const add = (a, b) => a + b;
  export const minus = (a, b) => a - b;
  export const devide = (a, b) => a * b;
  다른파일.js 👇👇👇👇👇
  import {add} from './연산.js' 
  import {add, minus} from './연산.js'
  // 함수의 이름이 절대로 같아야 한다 !!! 아님 동작을 안함.
  // 이름을 바꿔 사용하고 싶다면 import {add as plus} from './연산.js' 이렇게 바꾸자

  ---

• export default

  연산.js
  export default {add, minus, devide};
  // 위의 함수들을 가지고 있는 한개의 객체를 default로 export 하는 것임.
  // export된 객체를 원하는 이름으로 불러 사용할 수 있다.  
  // import 할때 중괄호를 쓸 필요 없다. 
  // ***파일에 하나의 export default만 사용 가능.
  다른 파일.js 👇👇👇👇👇
  import math from './연산.js'

  ---

• 섞어 사용

  함수들.js
  const 함수1번 = () => console.log('Welcome!!);
  export const 함수2번 = () => console.log('Nice to meet you Maeeean!?');
  export const 함수3번 = () => console.log('See you Again!!')
  export default 함수1번
  다른파일.js 👇👇👇👇👇
  import 함수1번다른이름 {함수2번, 함수3번} from './함수들.js'

  ---

• * import

  연산.js
  export const add = (a, b) => a + b;
  export const minus = (a, b) => a - b;
  export const devide = (a, b) => a * b;
  다른파일.js 👇👇👇👇👇
  import * as math from './연산.js'
  // math라는 객체에 다 들어가 있다. 

  ---

• Dynamic import
  보통은 export한 파일을 모두 import 한다. 웹사이트는 모든 코드를 다운받기에 로딩속도가 느려질 수 있다.
  이에 사용할 모듈만 import하여 사용할 수 있다.

  다른파일.js
  function 실행함수 () {
   import('./연산.js')
   .then(math => math.add(2, 4))
  }
  btn.addEventListener('click', 실행함수)