JavaScript 모듈 기본값 정의하고 가져오기 - default 키워드 활용법, export, import

ES6 모듈 시스템에서는 default 키워드를 사용하여 모듈에서 기본으로 내보내는 값을 정의할 수 있다.

숫자, 문자, 불리언과 같은 기본형 값과 객체, 함수, 클래스와 같은 참조형 값 모두올 수 있다.

 

---

export default 'hello';
export default function hello(name) {
  console.log('hello' + name);
};

export default class Hello {
  constructor(greeting) {
    this.greeting = greeting;
  }
  hi(name) {
    console.log(`${this.greeting} ${name}`);
  }
}

---

default 키워드 사용에 있어 중요한 점이 있는데, default 키워드는 하나의 모듈에서 한 번만 사용할 수 있다.

즉, 한 파일에서는 하나의 값만 default로 정의할 수 있다.

 

default 키워드 다음에는 var, let, const와 같은 변수 선언 키워드가 올 수 없다.

default는 사실 해당 모듈의 기본값을 선언하는 것이기 때문에 변수 선언 키워드가 오면 문법적 오류를 발생한다

예를 들어, A라는 모듈이 있으면 A.default = 'hello'와 같이 A모듈의 기본값을 할당한다고 볼 수 있다

 

 

---

//File: app.js
import Hello from './hello,js';

const koreanHi = new Hello('안녕하세요.');
koreanHi.hi('하린');

 

---

hello.js에서 default로 내보낸 값을 가져오고 import하는 모듈에서(현재 파일) 이름을 부여한다.

여기에는 Hello라는 이름으로 부여하였다

 

hello.js에서는 클래스를 기본값으로 내보냈기 때문에 new 키워드를 사용하여 객체를 생성한다.

 

Hello 클래스의 인스턴스인 koreanHi의 hi메소드를 호출한다.

 

위 코드를 크롬 콘솔에서 확인하면 다음과 같다

 

결과 : 안녕하세요. 하린

---

 

이렇게 모듈의 default 값을 가져오는 활용방법을 알아보았다

어느 한 파일에서 export default가 되어있는 부분을 다른 파일에서 불러오는것이 가능하다

그것은 import로 가져오게 되는데 이때 가져올때 이름은 꼭 export default에 맞춰서 import 할 필요가 없다

즉, import하는 파일에서 이름을 지정하여 사용하면된다.

그렇게 사용하면 모듈화된 파일안에 정의된 함수, 변수를 사용할 수 있다

 

다음은 모듈을 여러 이름으로 내보내고 가져오는 방법을 알아보자

 

 

2020/06/08 - [JavaScript/모듈 이해하기] - 자바스크립트 모듈 시스템 이해하기 - 번들링(Bumdling) 웹팩(Webpack)

자바스크립트 모듈 시스템 이해하기 - 번들링(Bumdling) 웹팩(Webpack)