모듈

모듈

자바스크립트 코드를 여러 파일과 폴더에 나누어 작성하고 효율적으로 불러올 수 있도록 해주며, script 태그에 type="module" 어트리뷰트를 추가해주면, 이 파일은 모듈로서 동작합니다. 파일 확장자로는 대개 mjs가 사용

Webpack, Parcel 등의 모듈 번들러를 통해 변환과정을 거친 뒤, 브라우저에는 일반적인 JavaScript 파일로서 불러오는 방법이 널리 사용되고 있는 추세

• import 혹은 export 구문을 사용할 수 있음
• 엄격 모드(strict mode)로 동작
• 모듈이 가장 바깥쪽에서 선언된 이름은 모듈 스코프에서 선언됨
• 같은 모듈을 여러 다른 모듈에 불러와도, 모듈 내부의 코드는 한번만 실행

<script type="module" src="index.mjs"></script>

모듈 스코프

모듈이 가장 바깥쪽에서 선언된 이름은 모듈 스코프에서 선언됨.
모듈 스코프에 선언된 이름은 (export 해주지 않는다면) 해당 모듈 내부에서만 접근할 수 있음

// variables.js

const foo = 'bar';

// 이 파일이 모듈로서 사용되고 있다면, `undefined`가 출력됩니다.
console.log(window.foo);

export & import

모듈 스코프에서 정의된 이름은 export 구문을 통해 다른 파일에서 사용할 수 있음.
'이름이 지정된 export'라는 뜻에서 named export라 부름

// variables.js
// foo, spam을 다른 파일에서 사용할 수 있도록 export 해줌
const foo = 'bar';
const spam = 'eggs';

export { foo, spam };

// main.js
// variables 모듈에 선언된 이름을 사용하기 위해 import 해줌
import { foo, spam } from './variables.js';

console.log(foo);
console.log(spam);

// functions.js
// 여러 모듈에서 재사용 할 수 있음
function add(x, y) {
  return x + y;
}

class Person {
  // ...
}

export { add, Person };

다른 모듈에 있는 이름을 사용하려면, 해당 모듈에서 이름을 export 해야함

// variables.js

const foo = 'bar'

// main.js
import { foo } from './variables.js';

console.log(foo); // 에러가 나거나, `undefined`가 출력됨

default export

모듈을 대표하는 하나의 값을 지정하고 그 값을 다른 모듈에서 편하게 불러와서 사용

// foo.js

export default 'bar';

// main.js

import foo from './foo.js'

console.log(foo); // bar

default export & export 동시에 가져오기

// `React`라는 이름의 default export와,
// Component, Fragment라는 일반적인 export를 동시에 가져오기
import React, { Component, Fragment } from 'react';

다른 이름으로 export & import 하기

export 혹은 import 하는 이름의 뒤에 as를 붙여서, 다른 이름이 대신 사용

const foo = 'bar';

export {foo as FOO}; // FOO 라는 이름으로 export 됨

import { Component asa Comp } from 'react'; // Comp라는 이름으로 import