[JS] 모듈을 불러오는 두가지 방식 - import, export / require

 

import 방식

ECMAScript 2015(ES6)에서 도입된 모듈 시스템

주로 현대적인 JavaScript 애플리케이션에서 사용

 

// 모듈 전체를 불러올 때
import * as moduleName from 'module-path';

// 모듈에서 특정 기능만 불러올 때
import { specificFunction } from 'module-path';

// 모듈에서 기본 내보내기를 불러올 때
import defaultExport from 'module-path';

// 기본 내보내기와 특정 기능을 함께 불러올 때
import defaultExport, { specificFunction } from 'module-path';

 

// math.js 파일에서
export function add(a, b) {
    return a + b;
}

// 다른 파일에서
import { add } from './math.js';

console.log(add(2, 3)); // 5

 

특징:

• import는 정적이며, 파일이 실행되기 전에 모든 import문이 평가됨
• 모듈은 기본적으로 strict mode로 동작
• 브라우저와 Node.js의 최신 버전에서 지원됨

 

 

require 방식

CommonJS 모듈 시스템

주로 Node.js 환경에서 사용

 

// 모듈 전체를 불러올 때
const moduleName = require('module-path');

// 모듈에서 특정 기능만 불러올 때
const { specificFunction } = require('module-path');

// 동적으로 모듈을 불러올 때
const dynamicModule = require('./dynamicModule.js');

 

// math.js 파일에서
exports.add = function(a, b) {
    return a + b;
};

// 다른 파일에서
const { add } = require('./math.js');

console.log(add(2, 3)); // 5

 

특징:

• require는 동적으로 모듈을 불러올 수 있으며, 조건문 안에서 사용 가능
• require는 모듈을 동기적으로 불러옴
• Node.js 환경에서 기본적으로 사용
• CommonJS 모듈은 일반적으로 ES6 모듈보다 유연하지만, 브라우저에서 직접 사용할 수는 없음 (번들러를 사용해야 함)

 

---

 

주요 차이점

• 타이밍: import는 정적이며 파일 시작 시 평가되지만, require는 실행 시 동적으로 호출할 수 있음
• 사용 환경: import는 브라우저와 Node.js 모두에서 사용 가능하며, 최신 표준을 따름. require는 주로 Node.js에서 사용
• 모듈 형식: import는 ES6 모듈 형식(.mjs), require는 CommonJS 모듈 형식을 따름