JS 모듈을 불러오는 require와 import

자바스크립트에서 모듈을 불러올때는 주로 require와 import를 사용한다.

require는 CommonJS, import는 ES6(ECMAscript 2015)에서 사용하는데 둘은 비교하면 다음과 같다.

 

1. 사용방법과 구문

• require : CommonJS에서 사용하며 주로 Node.js환경에서 사용된다. 동기적으로 모듈을 불러오는 특징을 가진다.

const module = require("module-name");  // require 방식

 

• import : ES6에서 사용하며 React, Vue등의 최신 자바스크립트 프레임워크에서 사용한다. 비동기적으로 모듈을 불러오는 특징을 가진다.

import module from "module-name";  // import 방식

 

 

2. 모듈을 불러오는 시점

• require : 런타임에 모듈을 불러온다. 코드가 실행되는 시점에 모듈이 로드된다. 따라서 코드 중간에 모듈을 불러오기 시작하면 코드실행이 멈추게된다.
• import : 컴파일때 모듈을 불러온다. 이는 모듈을 정적으로 분석하고 최적화 할 수 있게 해준다. 비동기적으로 불러오므로 비동기 로딩과 함께 트리쉐이킹같은 최적화기법을 사용할 수 있게 해준다.

 

3. 모듈 내보내기 (export)

export 과정에서도 차이가 있다.

• require

// module.js
const data = 'Hello, World!';
module.exports = data;

// main.js
const data = require('./module');
console.log(data); // Hello, World!

 

• import

// module.js
export const data = 'Hello, World!';

// main.js
import { data } from './module.js';
console.log(data); // Hello, World!

 

 

4. 결론

require와 import는 각자 다른 용도로 사용되며 작동환경에 맞게 적합한 방법을 선택해야 한다. Node.js와 같이 서버사이트 자바스크립트에서는 CommonJS의 require를 사용하지만 최신 Node.js는 import를 사용하는 ES6도 지원하고있다. 최신 브라우저에서도 ES6가 사용되며 웹개발에 많이 사용되는 React, Vue 등의 개발환경에서도 일반적으로 ES6를 사용한다. 정적 분석과 최적화에도 ES6의 import가 더욱 유리한면이 있다.

따라서 개발환경에 따라 올바른 방식을 선택해야하지만 최신 프로젝트 개발에서는 ES6의 import를 사용하는것이 권장된다.