ES6는 널리 사용되는 CommonJS 패턴보다 더 고급화된 모듈 가져오기/내보내기 패턴을 제공합니다. 이전 module.exports = {…}와는 달리 이제 여러 개의 명명된 값을 내보낼 수 있습니다. 마찬가지로 여러 개의 명명된 값을 가져올 수 있습니다.

파일 당 하나의 기본 내보내기가 있으며 이 내보낸 값을 이름으로 참조하지 않고 가져올 수 있습니다. 다른 모든 가져오기 및 내보내기의 이름을 지정해야 합니다.

새 가져오기 구문을 사용하여 이전 CommonJS 모듈을 가져오려고 하면 Babel은 런타임시 자동으로 형식의 차이를 처리합니다. 예전 스타일의 모듈에는 내보내기 시 바벨이 추가한 특수 __esModule 속성이 없습니다.

[ 가져오기(Importing) ]

1
2
3
4
5
6
7
8
// 기본 내보내기 가져오기
import React from 'react-native'

// 다른 명명된 내보내기 가져오기
import {View, Text, Image} from 'react-native'

// 기본값 및 다른 항목을 동시에 가져오기
// import React, {View, Text, Image} from 'react-native'

[ 바벨로 컴파일된 코드 ]

1
2
3
4
5
var _reactNative = require('react-native');

var _reactNative2 = _interopRequireDefault(_reactNative);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

위 예제에서 가져온 항목은 다음 예제처럼 react-native 모듈에서 내보낸 경우 사용할 수 있습니다.

[ 내보내기(Exporting) ]

1
2
export default React
export {View, Text, Image}

[ 바벨로 컴파일된 코드 ]

1
2
3
4
5
6
7
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = React;
exports.View = View;
exports.Text = Text;
exports.Image = Image;

가져오기/내보내기 구문에 대한 자세한 내용은 가져오기내보내기에 대한 MDN 참조를 참조하십시오.