ES6 자바스크립트 모듈 사용하기 (import, export)

ES6 모듈 만들고 사용하기

자바스크립트에는 지금까지 C(#include)나 JAVA(import)의 모듈시스템이 활성화되지 않았을까?

자바스크립트는 호이스팅이 되는 관계로 변수나 함수가 전역에서 사용할 수 있었기 때문에 이름으로 충돌을 일으키는 경우가 많아서 이용하기 어려웠다. (CommonJS로 사용할 수는 있었음)

ES6부터는 모듈 시스템을 사용할 수 있게 만들었다.

하지만 브라우저에서 지원이 되지 않고있기때문에 webpack같은 모듈 번들러를 사용해야만 모듈시스템(import, export)을 사용할 수 있다.

---

export, import

export const pi = Math.PI;
 
export function square(x) {
  return x * x;
}
 
export class Person {
  constructor(name) {
    this.name = name;
  }
}

export 키워드로 변수, 함수, 클래스를 외부의 스크립트로 모듈화 시킬 수 있다.

외부로 보내고 싶은 것들에 일일이 키워드를 붙여도 되고 아래처럼 한번에 export해도된다.

const pi = Math.PI;
 
function square(x) {
  return x * x;
}
class Person {
  constructor(name) {
    this.name = name;
  }
}
export { pi, square, Person };

또한 export default pi; 이렇게 default키워드를 붙일 수도 있는데 default키워드를 사용하면 이 모듈을 사용하는 스크립트에서 따로 모듈 변수명을 입력하지 않으면 자동으로 default키워드가 있는 모듈을 가져온다.

// main.js
import { pi, square, Person } from './lib';
console.log(pi);         // 3.141592653589793
console.log(square(10)); // 100
console.log(new Person('Lee')); // Person { name: 'Lee' }

반대로 가져오는 방법은 위와 같이 "import" 키워드를 사용하고 from 으로 해당 모듈의 js파일을 가리키면 된다.

import React from 'react';
import { render } from 'react-dom';

[리액트에서 모듈을 사용했던 방법]

import * as lib from './lib';
console.log(lib.pi);         // 3.141592653589793
console.log(lib.square(10)); // 100
console.log(new lib.Person('Lee')); // Person { name: 'Lee' }

위와 같이 "as"를 사용해서 일일이 모듈을 불러오지 않고 한번에 사용할 수 있다.

참고 사이트

https://poiemaweb.com/es6-module

https://www.zerocho.com/category/EcmaScript/post/579dca4054bae71500727ab9