JS 코드에서 외부 파일이나 모듈을 사용 할때
import+export
require+exports
생각없이 위 두가지 경우 중 하나를 사용했다.
그러다가 둘의 차이가 궁금해졌다.
일단 둘 다 JavaScript 모듈을 불러오는 데 사용되는 키워드이다.
-
import+export
ES6(ES2015) 모듈 시스템의 구문import crypto from "crypto"; export default Boost; -
require+exports
Node.js에서 사용되는 CommonJS 모듈 시스템의 구문.const crypto = require("crypto"); module.exports = Boost;
✅ 예시 1
모듈 전체 내보내기 / 가져오기
- CommonJs 문법 (require / exports)
// 모듈 전체를 export, 파일내 한번만 사용가능하다.
const obj = {
num: 100,
sum: function (a, b) {
console.log(a + b);
},
extract: function (a, b) {
console.log(a - b);
},
};const obj = require('./exportFile.js');
obj.num; // 100
obj.sum(10, 20); // 30
obj.extract(10, 20); // -10- ES6 문법 (import / export)
// 모듈 전체를 export, 파일내 한번만 사용가능하다.
const obj = {
num: 100,
sum: function (a, b) {
console.log(a + b);
},
extract: function (a, b) {
console.log(a - b);
},
};
export default obj;// 전체 자체를 import 할 경우 중괄호 없이 그냥 씀
import obj from './exportFile.js';
obj.num; // 100
obj.sum(10, 20); // 30
obj.extract(10, 20); // -10✅ 예시 2
모듈 개별 내보내기 / 가져오기
- CommonJs 문법 (require / exports)
// 멤버를 직접 일일히 export
exports.name = 'Ann'; // 변수의 export
exports.sayHello = function() { // 함수의 export
console.log('Hello World!');
}
exports.Person = class Person { // 클래스의 export
constructor(name){
this.name = name;
}
}const { name, sayHello, Person } = require('./exportFile.js');
console.log(name); // Ann
sayHello(); // Hello World!
const person = new Person('inpa');- ES6 문법 (import / export)
// 멤버를 직접 일일히 export
export const name = 'Ann'; // 변수의 export
export function sayHello() { // 함수의 export
console.log('Hello World!');
}
export class Person { // 클래스의 export
constructor(name){
this.name = name;
}
}
// ----------------------- OR ----------------------- //
// 멤버를 따로 묶어서 export
const name = 'Ann';
function sayHello() {
console.log('Hello World!');
}
class Person {
constructor(name){
this.name = name;
}
}
export {name, sayHello, Person}; // 변수, 함수, 클래스를 하나의 객체로 구성하여 exportimport { name, sayHello, Person } from './exportFile.js';
console.log(name); // Ann
sayHello(); // Hello World!
const person = new Person('inpa');
// ----------------------- OR ----------------------- //
// 개별로 export 된걸 * 로 한번에 묶고 as 로 별칭을 줘서, 마치 전체 export default 된걸 import 한 것 처럼 사용 가능
import * as obj from './exportFile.js';
console.log(obj.name); // Ann
obj.sayHello(); // Hello World!
const person = new obj.Person('inpa');❓차이점
- require()는 CommonJS를 사용하는 node.js문이지만 import()는 ES6에서만 사용
- 하나의 프로그램에서 두 키워드를 동시에 사용할 수 없다
- 일반적으로 import()는 사용자가 필요한 모듈 부분 만 선택하고 로드 할 수 있기 때문에 더 선호된다. 또한 require()보다 성능이 우수하며 메모리를 절약한다.
- 호출 시점의 차이
import는 모듈을 미리 로드하고 정적으로 평가됩니다. 모듈은 스크립트의 최상위 수준에서만 import할 수 있으며, 조건문이나 함수 내부에서는 동작하지 않습니다.require는 동적으로 모듈을 로드합니다. 조건문이나 함수 내부에서도 사용할 수 있으며, 필요한 시점에 모듈을 동적으로 로드할 수 있습니다.
- 모듈 시스템 지원 여부
import구문은 최신 버전의 브라우저와 일부 환경에서 지원됩니다. ES6 모듈 시스템은 정적인 모듈 로딩 및 트리 셰이킹(불필요한 코드 제거)과 같은 최적화를 제공합니다.require함수는 CommonJS 모듈 시스템의 표준입니다. Node.js 환경에서는 기본적으로 지원되며, 브라우저에서는 별도의 번들러나 변환 도구를 사용하여 CommonJS 모듈을 지원해야 합니다.
📘 꼬리 개념
CommonJS란?
CommonJS는 JavaScript를 위한 모듈 시스템 중 하나로, 서버 측 JavaScript인 Node.js에서 사용되는 표준입니다. CommonJS는 모듈을 정의하고 로드하는 방법을 명시합니다.
CommonJS 모듈 시스템은 모듈을 개별 파일로 구성하고 require 함수를 사용하여 다른 모듈을 가져옵니다.
각 모듈은 자신의 파일 스코프를 가지며, 모듈 내에서 정의된 변수, 함수, 객체 등은 기본적으로 해당 모듈 내에서만 유효합니다.
다른 모듈에서 사용하려면 exports 객체를 사용하여 외부로 공개해야 합니다.
무조건 import가 낫다?
최근 ES6(ES2015) 모듈 시스템인 import가 많이 사용되고 있지만, 아직까지는 import 키워드가 100% 대체되어 사용될 수 없습니다.
script태그를 사용하는 브라우저 환경과, NodeJS에서도 CommonJS를 기본 모듈 시스템으로 채택하고 있기 때문에, Babel과 같은 ES6 코드를 변환(transpile)해주는 도구를 사용할 수 없는 경우에는 require 키워드를 사용해야 합니다.
(그래도 난 import가 최고)
Babel(바벨)이란?
바벨이란 ES6+버전의 자바스크립트, 타입스크립트, jSX 등 다른 언어로 분류되는 언어들에 대해 모든 브라우저에서 동작할 수 있도록 호환시켜주는 툴입니다. 바벨은 최신 문법을 이전세대 문법으로 호환시켜주는 기능이 있는데 그 중 하나가 JSX문법입니다. JSX를 ES5 코드로 바꿔 브라우저에 작동할 수 있도록 하여 리액트에서 바벨이 사용된다.
참고 문헌 📝
